// v6 (11.10.2011) (function (jQuery) { jQuery.fn.elSlider = function (options) { var object = jQuery(this); options = jQuery.extend({ visibleitems: 1, // set simultaneously visible items, default 1 vertical: false, // set sliding animation to vertical, default false continuous: false, // set continuous sliding, default false numbers: false, // set display of numbers, default true thumbs: true, // set display of thumbs, default true fade: false, // set fading animation, default false autoplay: false, // set autoplay, default false autoplayspeed: 4000, // set autoplay speed, default 4000ms animationspeed: 300, // set sliding animation speed, default 300ms fadingspeed: 200, // set fading animation speed, default 200 customeasing: "easeInOutExpo", // Choose Easing Method from JQuery Easing Plugin, "swing" and "linear" if no Easing Plugin available itemclass: object.find(".sl_item"), visiblecontainer: object.find(".sl_visible"), movingcontainer: object.find(".sl_movingcontainer"), leftarrow: object.find(".sl_leftarrow"), rightarrow: object.find(".sl_rightarrow"), numberscontainer: object.find(".numbers"), number: object.find(".numbers a"), thumbscontainer: object.find(".hiddenthumbs"), thumb: object.find(".thumb a"), bar: object.find(".nav") }, options); return this.each(function () { // MAIN CONTAINERS var sl_item = options.itemclass, sl_movingcontainer = options.movingcontainer, sl_visiblecontainer = options.visiblecontainer, sl_leftarrow = options.leftarrow, sl_rightarrow = options.rightarrow, sl_numberscontainer = options.numberscontainer, sl_thumbscontainer = options.thumbscontainer, sl_number = options.number, sl_thumb = options.thumb, sl_bar = options.bar; // VARIABLES var sl_itemcount = sl_movingcontainer.children().length, sl_itemwidth = sl_item.outerWidth(), sl_itemwidthpxneg = "-" + sl_itemwidth + "px", sl_itemheight = sl_item.outerHeight(), sl_itemheightpxneg = "-" + sl_itemheight + "px", sl_visibleitems = options.visibleitems, sl_visiblewidth = sl_visibleitems * sl_itemwidth; var sl_currentpos = 0, sl_vertical = options.vertical, sl_continuous = options.continuous, sl_numbersoption = options.numbers, sl_thumbsoption = options.thumbs, sl_animationspeed = options.animationspeed, sl_fadingspeed = options.fadingspeed; var arguments = new Object, sl_cont_dir = "", sl_aniarg_right = {}, sl_aniarg_left = {}; var lastitem = false, firstitem = false; // SET CONTAINERWIDTH / HIDE ARROW sl_visiblecontainer.width(sl_visiblewidth); if (sl_continuous == false) { sl_leftarrow.addClass("ishidden"); } // SHOW THUMBNAILS if (sl_thumbsoption == true) { object.hover(function() { sl_thumbscontainer.fadeIn("fast"); }, function() { sl_thumbscontainer.fadeOut("fast"); }); } // DEFINE ARGUMENTS-OBJECT FOR ANIMATION function defineArgs(times) { if (sl_vertical == true) { sl_item.css({"float":"none"}); sl_visiblecontainer.css({"height":sl_itemheight * sl_visibleitems}); sl_aniarg_right["top"] = "-=" + sl_itemheight * times; sl_aniarg_right["queue"] = false; sl_aniarg_left["top"] = "+=" + sl_itemheight * times; sl_aniarg_left["queue"] = false; sl_cont_dir = "top"; } else { sl_aniarg_right["left"] = "-=" + sl_itemwidth * times; sl_aniarg_right["queue"] = false; sl_aniarg_left["left"] = "+=" + sl_itemwidth * times; sl_aniarg_left["queue"] = false; sl_cont_dir = "left"; } } // GENERAL ANIMATION CONTROLLER function Animation(direction, times) { var currentbefore = sl_currentpos; if (sl_continuous == false) { if (direction == "right") { if (sl_leftarrow.hasClass("ishidden")) { sl_leftarrow.removeClass("ishidden"); } } else { if (sl_rightarrow.hasClass("ishidden")) { sl_rightarrow.removeClass("ishidden"); } } } function AppendFirstItem() { lastitem = true; var firstitemtomove = sl_item.eq(0); firstitemtomove.clone().appendTo(sl_movingcontainer); } function PrependLastItem() { firstitem = true; var lastitemtomove = sl_item.eq(sl_itemcount - 1); lastitemtomove.clone().prependTo(sl_movingcontainer); } if (direction == "right") { if (sl_continuous == false) { sl_currentpos = sl_currentpos + (1 * times); if (sl_currentpos > 0) { sl_leftarrow.removeClass("ishidden"); } if (sl_currentpos == (sl_itemcount - sl_visibleitems)) { sl_rightarrow.addClass("ishidden"); } } else { sl_currentpos = (sl_currentpos - 1) + (1 * times); if ((sl_currentpos + 1) == sl_itemcount) { AppendFirstItem(); } sl_currentpos++; if (sl_currentpos == sl_itemcount) { sl_currentpos = 0; } } } else { if (sl_continuous == false) { sl_currentpos = sl_currentpos - (1 * times); if (sl_currentpos == 0) { sl_leftarrow.addClass("ishidden"); } } else { sl_currentpos = (sl_currentpos + 1) - (1 * times); if ((sl_currentpos) == 0) { PrependLastItem(); } sl_currentpos--; if (sl_currentpos <= -1) { sl_currentpos = (sl_itemcount - 1); } } } if (options.fade == true) { Fade(direction, sl_fadingspeed, times, currentbefore); } else { Slide(direction, sl_animationspeed, times); } if (sl_thumbsoption == true) { sl_thumb.removeClass("current"); sl_thumb.eq(sl_currentpos).addClass("current"); } if (sl_numbersoption == true) { sl_number.removeClass("current"); sl_number.eq(sl_currentpos).addClass("current"); } return false; } // FADE ANIMATION function Fade(direction, speed, times, startingpos) { if (direction == "right") { object.find(".sl_item:eq(" + startingpos + ")").clone().appendTo(sl_visiblecontainer).fadeOut(sl_fadingspeed, function() { jQuery(this).remove(); }); Slide("right", 0, times); } else { if (startingpos == 0) { startingpos = 1; } object.find(".sl_item:eq(" + (startingpos) + ")").clone().appendTo(sl_visiblecontainer).fadeOut(sl_fadingspeed, function() { jQuery(this).remove(); }); Slide("left", 0, times); } } // SLIDE ANIMATION function Slide(direction, speed, times) { defineArgs(times); if (direction == "right") { arguments = sl_aniarg_right; } else { arguments = sl_aniarg_left; } if (firstitem == true) { if (sl_vertical == false) { sl_movingcontainer.css("left", sl_itemwidthpxneg); } else { sl_movingcontainer.css("top", sl_itemheightpxneg); } } var customeasing = options.customeasing; sl_movingcontainer.stop(false, false).animate( arguments, speed, customeasing, function() { if (lastitem == true || firstitem == true) { if (direction == "right") { if (sl_vertical == false) { sl_movingcontainer.css("left", "0px"); } else { sl_movingcontainer.css("top", 0); } lastitem = false; object.find(".sl_item:eq(" + sl_itemcount + ")").remove(); } if (direction == "left") { object.find(".sl_item:eq(0)").remove(); if (sl_vertical == false) { var fromleft = (sl_itemwidth * (sl_itemcount - 1)) * -1; sl_movingcontainer.css("left", fromleft + "px"); } else { var fromtop = (sl_itemheight * (sl_itemcount - 1)) * -1; sl_movingcontainer.css("top", fromtop + "px"); } firstitem = false; } } } ); } // CLICK ON ITEM function clickOnItem(item, number) { if (object.find(sl_movingcontainer + ':animated').length) { return false; } StopInterval(); if (number == true) { var sl_clickpos = (parseInt(item.html())) - 1; } else { var sl_clickpos = (parseInt(jQuery("span.th_nr", item).html())) - 1; } var difference = sl_currentpos - sl_clickpos; difference = Math.abs(difference); if (sl_currentpos > sl_clickpos) { Animation("left", difference); } else { Animation("right", difference); } } // NUMBERS CLICK sl_number.bind("click", function() { clickOnItem(jQuery(this), true); return false; }); // THUMBNAIL CLICK sl_thumb.bind("click", function() { clickOnItem(jQuery(this), false); return false; }); // RIGHT AND LEFT ARROW CLICK sl_rightarrow.bind({ click: function() { if (object.find(sl_movingcontainer + ':animated').length) { return false; } StopInterval(); Animation("right", 1); return false; } }); sl_leftarrow.bind({ click: function() { if (object.find(sl_movingcontainer + ':animated').length) { return false; } StopInterval(); Animation("left", 1); return false; } }); // AUTOPLAY if (options.autoplay == true) { function AnimateThis() { Animation("right", 1); } var interval = setInterval(AnimateThis, options.autoplayspeed); } function StopInterval() { interval = clearInterval(interval); } }); }; })(jQuery);