Responsive JQuery Slider

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.

Goals

1. Responsive
2. Works with many pictures (+10000)
3. Small footprint and easy to integrate
4. No Flash
5. Must be awesome (iam working on that)

Demo

SourceCode

$.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

Integration

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...

Contribute

Feel free to make suggestions and/or code improvements

Thank You

Chanelog

2013/12/08 added preloading, fixed rotation issue, improved transition
2013/10/02 inital release

Happy Hacking

Andreas