Template:Nevada Java/s3Slider.js

From 2011.igem.org

/* ------------------------------------------------------------------------ s3Slider

Developped By: Boban Karišik -> http://www.serie3.info/

       CSS Help: Mészáros Róbert -> http://www.perspectived.com/

Version: 1.0

Copyright: Feel free to redistribute the script/modify it, as long as you leave my infos at the top.


*/


(function($){

   $.fn.s3Slider = function(vars) {       
       
       var element     = this;
       var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
       var current     = null;
       var timeOutFn   = null;
       var faderStat   = true;
       var mOver       = false;
       var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
       var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
           
       items.each(function(i) {
   
           $(items[i]).mouseover(function() {
              mOver = true;
           });
           
           $(items[i]).mouseout(function() {
               mOver   = false;
               fadeElement(true);
           });
           
       });
       
       var fadeElement = function(isMouseOut) {
           var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
           thisTimeOut = (faderStat) ? 10 : thisTimeOut;
           if(items.length > 0) {
               timeOutFn = setTimeout(makeSlider, thisTimeOut);
           } else {
               console.log("Poof..");
           }
       }
       
       var makeSlider = function() {
           current = (current != null) ? current : items[(items.length-1)];
           var currNo      = jQuery.inArray(current, items) + 1
           currNo = (currNo == items.length) ? 0 : (currNo - 1);
           var newMargin   = $(element).width() * currNo;
           if(faderStat == true) {
               if(!mOver) {
                   $(items[currNo]).fadeIn((timeOut/6), function() {
                       if($(itemsSpan[currNo]).css('bottom') == 0) {
                           $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                               faderStat = false;
                               current = items[currNo];
                               if(!mOver) {
                                   fadeElement(false);
                               }
                           });
                       } else {
                           $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                               faderStat = false;
                               current = items[currNo];
                               if(!mOver) {
                                   fadeElement(false);
                               }
                           });
                       }
                   });
               }
           } else {
               if(!mOver) {
                   if($(itemsSpan[currNo]).css('bottom') == 0) {
                       $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                           $(items[currNo]).fadeOut((timeOut/6), function() {
                               faderStat = true;
                               current = items[(currNo+1)];
                               if(!mOver) {
                                   fadeElement(false);
                               }
                           });
                       });
                   } else {
                       $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                       $(items[currNo]).fadeOut((timeOut/6), function() {
                               faderStat = true;
                               current = items[(currNo+1)];
                               if(!mOver) {
                                   fadeElement(false);
                               }
                           });
                       });
                   }
               }
           }
       }
       
       makeSlider();
   };  

})(jQuery);