%PDF-
%PDF-
Mini Shell
Mini Shell
(function ($) {
"use strict";
// from jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
$.extend($.easing,
{
FWS2easeOutCubic: function (x, t, b, c, d) {
return c * ((t = t / d - 1) * t * t + 1) + b;
},
FWS2easeInOutExpo: function (x, t, b, c, d) {
if (t == 0)
return b;
if (t == d)
return b + c;
if ((t /= d / 2) < 1)
return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
}
});
$.fn.fws2 = function (options) {
var glob = {
options: {
cs : 0,
duration : 750,
hoverpause : 1,
pause : 6000,
arrows : 1,
bullets : 1,
height : 600,
expandDuration : 750,
linktext : "Read More",
titleHTML : '<h4>%title%</h4>',
descriptionHTML : '<p>%desc%</p>',
linkHTML : '<a href="%link%">%linktext%</a>',
beforeInit : function() {},
afterInit : function() {},
slideStart : function() {},
slideEnd : function() {}
},
slides: []
};
$.extend(glob.options, options);
var randID = "fws2-instance-" + new Date().getTime();
$('<div id="' + randID + '" class="fws2"></div>').appendTo(this);
var $instance = $("#" + randID);
var content = {
resize: function () {
$instance.css({height: $instance.find(".slide:first").height()});
},
replaceHTML: function(html, th){
th.linktext = th.linktext ? th.linktext : glob.options.linktext;
return html.replace("%title%", th.title)
.replace("%desc%", th.description)
.replace("%link%", th.link)
.replace("%linktext%", th.linktext);
},
buildHTML: function () {
var parent = this;
var html = "";
html += '<div class="slider_container">';
$(glob.slides).each(function () {
var linktext = this.linktext ? this.linktext : glob.options.linktext;
html += '<div class="slide">';
html += '<img src="' + this.image + '" alt="">';
html += '<div class="slide_content">';
html += '<div class="slide_content_wrap">';
html += '<div class="title">' + parent.replaceHTML(glob.options.titleHTML, this) + '</div>';
html += '<div class="description">' + parent.replaceHTML(glob.options.descriptionHTML, this) + '</div>';
html += '<div class="readmore">' + parent.replaceHTML(glob.options.linkHTML, this) + '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
});
html += '</div>';
if (glob.options.arrows == "1") {
html += '<div class="slidePrev"><i class="fa fa-chevron-left"></i></div>';
html += '<div class="slideNext"><i class="fa fa-chevron-right"></i></div>';
}
html += '<div class="timers"></div>';
if (glob.options.bullets == "1") {
html += '<div class="bullets"></div>';
}
$(html).appendTo($instance);
for (var i = 0; i < glob.slides.length; i++) {
$('<div class="timer"><div class="progress"></div></div>').appendTo($instance.find(".timers"));
$('<div class="bullet"><i class="fa fa-circle"></i></div>').appendTo($instance.find(".bullets"));
}
},
imgLoaded: function ($img, callback, step) {
if (typeof $.fn.imagesLoaded !== "undefined") {
// imagesLoaded script is loaded
$img.imagesLoaded(function () {
if (typeof callback === "function") {
callback();
}
});
return;
}
var total = $img.length;
var loaded = 0;
if (total <= 0) {
if (typeof callback === "function") {
callback();
}
}
$img.each(function () {
var image = new Image;
image.onload = function () {
if (typeof step === "function") {
step();
}
loaded++;
if (loaded >= total) {
if (typeof callback === "function") {
callback();
}
}
};
image.onerror = function () {
console.warn("Could not load image");
};
image.src = $(this).attr("src");
});
},
init: function () {
/* Build html */
this.buildHTML();
this.imgLoaded($instance.find("img"), function () {
$instance.find(".bullets .bullet").eq(glob.options.cs).addClass("active");
$instance.find(".timers").css({
// width: ($instance.find(".timers .timer").length + 1) * $instance.find(".timers .timer").width() + 5
});
$instance.find(".slide").eq(glob.options.cs).fadeIn({
duration: glob.options.expandDuration,
easing: "swing"
});
$instance.animate({
height: $instance.find(".slide:first").height()
}, {
duration: glob.options.expandDuration,
easing: "FWS2easeInOutExpo",
complete: function () {
// Arrows and bullets animation show duration
var controls_anim_duration = 1500;
$instance.find(".slidePrev").animate({
left: 0
}, {
duration: controls_anim_duration,
easing: "FWS2easeInOutExpo"
});
$instance.find(".slideNext").animate({
right: 0
}, {
duration: controls_anim_duration,
easing: "FWS2easeInOutExpo"
});
$instance.find(".bullets").animate({
bottom: 15
}, {
duration: controls_anim_duration,
easing: "FWS2easeInOutExpo"
});
content.showText();
controls.position();
content.resize();
auto.run();
auto.focus();
setTimeout(function () {
if (typeof glob.options.afterInit === "function") {
glob.options.afterInit();
}
}, controls_anim_duration);
}
});
});
},
show: function () {
/* Show slide */
content.hideText();
$instance.find(".bullets .bullet").removeClass("active");
$instance.find(".bullets .bullet").eq(glob.options.cs).addClass("active");
$instance.find(".slide").eq(glob.options.cs).css({
opacity: 0,
zIndex: 2
}).show().animate({
opacity: 1
}, {
queue: false,
duration: glob.options.duration,
easing: "swing",
start: function () {
if (typeof glob.options.slideStart === "function") {
glob.options.slideStart($instance.find(".slide").eq(glob.options.cs));
}
},
complete: function () {
$instance.find(".slide").filter(":lt(" + glob.options.cs + ")").css("zIndex", 0).hide();
$instance.find(".slide").filter(":gt(" + glob.options.cs + ")").css("zIndex", 0).hide();
$instance.find(".slide").eq(glob.options.cs).css("zIndex", 1);
content.showText();
auto.run();
if (typeof glob.options.slideEnd === "function") {
glob.options.slideEnd($instance.find(".slide").eq(glob.options.cs));
}
}
});
},
showText: function () {
var $slide = $instance.find(".slide").eq(glob.options.cs);
/* Position Text */
var textWrapper = $slide.find(".slide_content_wrap");
textWrapper.css({
top: "50%",
left: 0,
display: "block"
});
textWrapper.css({
marginTop: -1 * textWrapper.height() / 2,
marginLeft: "8%"
});
/* Show slide text */
$slide.find(".title").fadeTo(300, 1);
setTimeout(function () {
$slide.find(".description").fadeTo(300, 1);
}, 150);
setTimeout(function () {
$slide.find(".readmore").fadeTo(300, 1);
}, 300);
},
hideText: function () {
/* Hide slide text */
$instance.find(".slide .title").fadeTo(300, 0);
setTimeout(function () {
$instance.find(".slide .description").fadeTo(300, 0);
}, 150);
setTimeout(function () {
$instance.find(".slide .readmore").fadeTo(300, 0);
}, 300);
}
};
var controls = {
/* Adjust buttons position */
position: function () {
$instance.find(".slidePrev, .slideNext").css({
top: $instance.height() / 2 - $instance.find(".slideNext").height() / 2
});
$instance.find(".slidePrev").css({left: 0});
$instance.find(".slideNext").css({right: 0});
},
bindControls: function () {
$(window).on("resize",function () {
content.resize();
controls.position();
});
/* Hover effect */
$instance.find(".slidePrev, .slideNext").on("mouseover", function () {
$(this).animate({
opacity: 1
}, {
queue: false,
duration: 1000,
easing: "FWS2easeOutCubic"
});
});
/* Hover effect - mouseout */
$instance.find(".slidePrev, .slideNext").on("mouseout", function () {
$(this).animate({
opacity: 0.5
}, {
queue: false,
duration: 1000,
easing: "FWS2easeOutCubic"
});
});
/* Arrow Key Bind */
$(document).on("keyup", function (e) {
if (e.which === 39) {
$instance.find(".slideNext").trigger("click");
}
if (e.which === 37) {
$instance.find(".slidePrev").trigger("click");
}
});
/* Next Button */
$instance.find(".slideNext").on("click", function (e) {
e.stopPropagation();
if ($instance.find(".slide").is(":animated"))
return;
if ($instance.find(".slide").eq(glob.options.cs + 1).length <= 0) {
glob.options.cs = 0;
$instance.find(".timers .timer .progress").stop();
$instance.find(".timers .timer:last .progress").animate({
width: "100%"
}, {
queue: false,
duration: glob.options.duration,
easing: "FWS2easeOutCubic",
complete: function () {
$instance.find(".timers .timer .progress").css({
width: "0%"
});
}
});
} else {
glob.options.cs++;
$instance.find(".timers .timer .progress").stop();
$instance.find(".timers .timer:lt(" + glob.options.cs + ") .progress").animate({
width: "100%"
}, {
queue: false,
duration: glob.options.duration,
easing: "FWS2easeOutCubic"
});
}
content.show();
});
/* Previous Button */
$instance.find(".slidePrev").on("click", function (e) {
e.stopPropagation();
if ($instance.find(".slide").is(":animated")) {
return;
}
if (glob.options.cs <= 0) {
glob.options.cs = $instance.find(".slide:last").index();
$instance.find(".timers .timer .progress").stop();
$instance.find(".timers .timer .progress").css({
width: "100%"
});
$instance.find(".timers .timer:last .progress").animate({
width: "0%"
}, {
queue: false,
duration: glob.options.duration,
easing: "FWS2easeOutCubic"
});
} else {
glob.options.cs--;
$instance.find(".timers .timer .progress").stop();
$instance.find(".timers .timer:gt(" + glob.options.cs + ") .progress").css({
width: "0%"
});
$instance.find(".timers .timer:eq(" + glob.options.cs + ") .progress").animate({
width: "0%"
}, {
queue: false,
duration: glob.options.duration,
easing: "FWS2easeOutCubic"
});
}
content.show();
});
$instance.find(".bullets .bullet").on("click", function (e) {
e.stopPropagation();
if ($instance.find(".slide").is(":animated")) {
return;
}
if ($(this).hasClass("active")) {
return;
}
glob.options.cs = $(this).index();
$instance.find(".timers .timer .progress").stop();
var $reverse = $instance.find(".timers .timer:gt(" + glob.options.cs + ") .progress, .timers .timer:eq(" + glob.options.cs + ") .progress").get().reverse();
var dgt = glob.options.duration / $($reverse).length;
$($reverse).each(function (i) {
var th = this;
setTimeout(function () {
$(th).animate({
width: 0
}, {
queue: false,
duration: dgt,
easing: "linear"
});
}, i * dgt);
});
var dlt = glob.options.duration / $instance.find(".timers .timer:lt(" + glob.options.cs + ")").length;
$instance.find(".timers .timer:lt(" + glob.options.cs + ") .progress").each(function (i) {
var th = this;
setTimeout(function () {
$(th).animate({
width: "100%"
}, {
queue: false,
duration: dlt,
easing: "linear"
});
}, i * dlt);
});
content.show();
});
}
};
var auto = {
/* Run timer */
run: function () {
if (glob.options.pause === 0) {
return;
}
$instance.find(".timer:eq(" + glob.options.cs + ") .progress").animate({
width: "100%"
}, {
queue: false,
duration: (glob.options.pause - (glob.options.pause / 100) * ((($instance.find(".timer:eq(" + glob.options.cs + ") .progress").width() / $instance.find(".timer:eq(" + glob.options.cs + ")").width()) * 100))),
easing: "linear",
complete: function () {
$instance.find(".slideNext").trigger("click");
}
});
},
/* Stop on focus */
focus: function () {
if (glob.options.hoverpause === 1) {
$instance.find(".slide_content").on("mouseover", function () {
if ($instance.find(".slide").is(":animated"))
return;
$instance.find(".timer .progress").stop();
});
$instance.find(".slide_content").on("mouseleave", function () {
if ($instance.find(".slide").is(":animated"))
return;
auto.run();
});
}
}
};
this.start = function () {
if (typeof glob.options.beforeInit === "function") {
glob.options.beforeInit();
}
content.init();
controls.bindControls();
return this;
};
this.addSlide = function(slide) {
glob.slides.push(slide);
return this;
};
this.settings = function(settings) {
$.extend(glob.options, settings);
return this;
};
this.destroy = function() {
$instance
.stop()
.off()
.find("*")
.stop()
.off();
$instance.remove();
return this;
};
this.restart = function() {
glob.options.cs = 0;
$instance
.stop()
.off()
.find("*")
.stop()
.off();
$instance.empty();
this.start();
return this;
};
this.getSlidesNum = function(){
return glob.slides.length;
};
return this;
};
})(jQuery);
Zerion Mini Shell 1.0