This is my first jQuery Plugin and a pre release of my responsive slider. The main reason for programming another javascript slider is for fun. Another reason was the existing slider did not feed my needs.
$.fn.slider = function (options) { var settings = $.extend({ interval: 2000, showCaption: false, dataClass: "imagedata", preload: 3 }, options); /* todo var autoPlayback = true; */ function LoaderImage(url) { var self = this; this.isLoaded = false; this.url = url; this.imgObj = new Image(); this.load = function () { self.imgObj.src = self.url; } this.onLoad = undefined; // callback function this.imgObj.onload = function () { // load imgUrl into imgObj and call imgOnLoad when finished self.isLoaded = true; console.log("imgIsLoaded"); if (self.onLoad) self.onLoad(); }; } //for every slider object, we attach the slider functionality $(this).each(function () { var items = []; var cnt = 0; $(this).find('ul.' + settings.dataClass) .children().each(function () { var item = new LoaderImage( decodeURI($(this).text()) ); // TODO: broken preloader if (cnt < settings.preload) { item.load(); } items.push(item); ++cnt; }); //we create a img tag var img = $('<img />').attr({ "class": "img opaque", "src": items[0].url }).insertAfter($(this).find('ul.' + settings.dataClass)); //we need a second one for overlay/transition effect var oldimg = $('<img />').attr({ "class": "img opaque", "src": items[0].url }).insertAfter(img); if (settings.showCaption) var caption = $('<span />').html( items[0].caption).insertAfter( img); var btnBox = $('<div />').attr({ "class": "btnBox" }).insertBefore($(img)); $(btnBox).append($('<span />').attr({ "id": "preBtn", "class": "btn" }).html("Prev")); $(btnBox).append($('<span />').attr({ "id": "nextBtn", "class": "btn" }).html("Next")); //we start rotation var i = 0; function gotoNext(back, isClick) { back = typeof back !== 'undefined' ? back : false; isClick = typeof isClick !== 'undefined' ? isClick : false; if (back) --i; else ++i; if (i < 0) i = cnt - 1; else if (i > cnt - 1) i = 0; var setImageFunc = function () { oldimg.removeClass("opaque"); img.attr({ "src": items[i].imgObj.src, "class": "opaque img" }); var tmp = oldimg; oldimg = img; img = tmp; }; if (!items[i].isLoaded) { items[i].onLoad = function () { setImageFunc(); } items[i].load(); } else { setImageFunc(); } } var slideint = setInterval( function () { gotoNext() }, settings.interval); $($(this).find("#nextBtn")).click( function () { clearInterval(slideint); gotoNext(false); slideint = setInterval( function () { gotoNext() }, settings.interval); }); $($(this).find("#preBtn")).click( function () { clearInterval(slideint); gotoNext(true); slideint = setInterval( function () { gotoNext() }, settings.interval); }); }); } // end plugin
Please dont integrate my slider at this time, because its still an alpha. I know there is plenty of room for improvements, like pre loading, different animation, key binding etc...
Feel free to make suggestions and/or code improvements
2013/12/08 added preloading, fixed rotation issue, improved transition 2013/10/02 inital release
Happy Hacking
Andreas