/* * easyslider - v1.0 * light-weight, responsive slider. * * * made by paul rose * under mit license */ // the semi-colon before function invocation is a safety net against concatenated // scripts and/or other plugins which may not be closed properly. ;( function( $, window, document, undefined ) { "use strict"; // undefined is used here as the undefined global variable in ecmascript 3 is // mutable (ie. it can be changed by someone else). undefined isn't really being // passed in so we can ensure the value of it is truly undefined. in es5, undefined // can no longer be modified. // window and document are passed through as local variables rather than global // as this (slightly) quickens the resolution process and can be more efficiently // minified (especially when both are regularly referenced in your plugin). // create the defaults once var pluginname = "easyslider", defaults = { slidespeed: 500, paginationspacing: "15px", paginationdiameter: "12px", paginationpositionfrombottom: "20px", controlsclass: ".controls", slidesclass: ".slides", paginationclass: ".pagination" }; // the actual plugin constructor function plugin (element, options) { this.element = element; // jquery has an extend method which merges the contents of two or // more objects, storing the result in the first object. the first object // is generally empty as we don't want to alter the default options for // future instances of the plugin this.settings = $.extend({}, defaults, options); this._default = defaults; this._name = pluginname; this.init(); } // avoid plugin.prototype conflicts $.extend( plugin.prototype, { init: function() { // place initialization logic here // you already have access to the dom element and // the options via the instance, e.g. this.element // and this.settings // you can add more functions like the one below and // call them like the example below this.setproperties(); this.positionpagination(); this.positioncontrols(); this.slideparameters.setcurrentslidenumber.call(this, 1); this.events.clickright.call(this); this.events.clickleft.call(this); this.events.clickpage.call(this); }, events: { clickright: function() { var _this = this; $(this.settings.controlsclass+" "+"li:last-child").click( function() { if (_this.slideparameters.getcurrentslidenumber.call(_this) === _this.slideparameters.getnumberofslides.call(_this)) { //go to first slide, when slideshow has reached max distance $(_this.settings.slidesclass).animate({right: "0%"}, _this.settings.slidespeed); _this.slideparameters.setcurrentslidenumber.call(_this, 1); _this.paginate(_this.slideparameters.getcurrentslidenumber.call(_this)); } else { //go to next slide $(_this.settings.slidesclass).animate({right: "+=100%"}, _this.settings.slidespeed); _this.slideparameters.setcurrentslidenumber.call(_this, _this.slideparameters.getcurrentslidenumber.call(_this)+1); _this.paginate(_this.slideparameters.getcurrentslidenumber.call(_this)); } }); }, clickleft: function() { var _this = this; $(this.settings.controlsclass + " " + "li:first-child").click( function() { if (_this.slideparameters.getcurrentslidenumber.call(_this) === 1) { //go to first slide, when slideshow has reached max distance $(_this.settings.slidesclass).animate({right: (_this.slideparameters.getmaxslidepercentage.call(_this)-100).tostring()+"%"}, _this.settings.slidespeed); _this.slideparameters.setcurrentslidenumber.call(_this, _this.slideparameters.getnumberofslides.call(_this)); _this.paginate(_this.slideparameters.getcurrentslidenumber.call(_this)); } else { //go to next slide $(_this.settings.slidesclass).animate({right: "-=100%"}, _this.settings.slidespeed); _this.slideparameters.setcurrentslidenumber.call(_this, _this.slideparameters.getcurrentslidenumber.call(_this)-1); _this.paginate(_this.slideparameters.getcurrentslidenumber.call(_this)); } }); }, clickpage: function() { var _this = this; $(this.settings.paginationclass + " " + "li").click( function() { var currentslidenumber = $(this).index()+1; $(_this.settings.slidesclass).animate({right: ((currentslidenumber-1)*100).tostring()+"%"}, 500); _this.paginate(currentslidenumber); }); } }, paginate: function(currentslidenumber) { var i; var total = this.slideparameters.getnumberofslides.call(this); for (i=1; i<=total; i++) { $(this.settings.paginationclass + " " + "li:nth-child"+ "(" + i.tostring() + ")").removeclass("active"); } $(this.settings.paginationclass + " " + "li:nth-child"+ "(" + currentslidenumber.tostring() + ")").addclass("active"); this.slideparameters.setcurrentslidenumber.call(this, currentslidenumber); }, positionpagination: function() { var numberofslides = this.slideparameters.getnumberofslides.call(this); var marginleft = -(numberofslides*(this.convertstringtointeger(this.settings.paginationdiameter)) + (numberofslides-1)*(this.convertstringtointeger(this.settings.paginationspacing)))/2; $(this.settings.paginationclass).css("margin-left", marginleft); }, positioncontrols: function() { var heightdiff = (this.slideparameters.getsliderheight.call(this)-this.slideparameters.getslideheight.call(this))/2; var halfheightcontrol = $(this.settings.controlsclass + " " + "li").css("margin-top"); $(this.settings.controlsclass + " " + "li").css("margin-top", ((this.convertstringtointeger(halfheightcontrol))-heightdiff)+"px"); }, slideparameters: { setcurrentslidenumber: function(currentslidenumber) { this.currentslidenumber = currentslidenumber; }, getcurrentslidenumber: function() { return this.currentslidenumber; }, getnumberofslides: function() { return $(this.settings.slidesclass).children().length; }, getslidewidth: function() { return $(this.settings.slidesclass + " " + "li").width(); }, getslideheight: function() { return $(this.settings.slidesclass + " " + "li").height(); }, getsliderheight: function() { return $(this.element).height(); }, getmaxslidepercentage: function() { return this.slideparameters.getnumberofslides.call(this)*100; }, }, convertstringtointeger: function(string) { return parseint(string); }, setproperties: function() { $("#slider").css({ "position": "relative", "overflow": "hidden" }); $(this.settings.slidesclass).css({ "position": "relative", "width": this.slideparameters.getmaxslidepercentage.call(this).tostring()+"%" }); $(this.settings.controlsclass).css({ "cursor": "pointer" }); $(this.settings.controlsclass+" "+"li").css({ "position": "absolute" }); $(this.settings.slidesclass+" "+"li").css({ "width": 100/this.slideparameters.getnumberofslides.call(this).tostring()+"%", "float": "left" }); $(this.settings.paginationclass).css({ "position": "relative", "left": "50%", "bottom": this.settings.paginationpositionfrombottom, "margin": 0 }); $(this.settings.paginationclass+" "+"li").css({ "margin-right": this.settings.paginationspacing, "float": "left", "cursor": "pointer", "width": this.settings.paginationdiameter, "height": this.settings.paginationdiameter, "border-radius": "9999px" }); } }); // a really lightweight plugin wrapper around the constructor, // preventing against multiple instantiations $.fn[ pluginname ] = function( options ) { return this.each( function() { if ( !$.data( this, "plugin_" + pluginname ) ) { $.data( this, "plugin_" + pluginname, new plugin( this, options ) ); } } ); }; } )( jquery, window, document );