陳沛鴻 Home1 templatemo 378 dragonfly jquery.nivo.slider

From 2014hs.igem.org

Revision as of 07:46, 4 May 2014 by F91445122 (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

/*

* jQuery Nivo Slider v2.6
* http://nivo.dev7studios.com
*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 
* March 2010
*/

(function($) {

   var NivoSlider = function(element, options){

//Defaults are below var settings = $.extend({}, $.fn.nivoSlider.defaults, options);

       //Useful variables. Play carefully.
       var vars = {
           currentSlide: 0,
           currentImage: ,
           totalSlides: 0,
           randAnim: ,
           running: false,
           paused: false,
           stop: false
       };
   
       //Get this slider
       var slider = $(element);
       slider.data('nivo:vars', vars);
       slider.css('position','relative');
       slider.addClass('nivoSlider');
       
       //Find our slider children
       var kids = slider.children();
       kids.each(function() {
           var child = $(this);
           var link = ;
           if(!child.is('img')){
               if(child.is('a')){
                   child.addClass('nivo-imageLink');
                   link = child;
               }
               child = child.find('img:first');
           }
           //Get img width & height
           var childWidth = child.width();
           if(childWidth == 0) childWidth = child.attr('width');
           var childHeight = child.height();
           if(childHeight == 0) childHeight = child.attr('height');
           //Resize the slider
           if(childWidth > slider.width()){
               slider.width(childWidth);
           }
           if(childHeight > slider.height()){
               slider.height(childHeight);
           }
           if(link != ){
               link.css('display','none');
           }
           child.css('display','none');
           vars.totalSlides++;
       });
       
       //Set startSlide
       if(settings.startSlide > 0){
           if(settings.startSlide >= vars.totalSlides) settings.startSlide = vars.totalSlides - 1;
           vars.currentSlide = settings.startSlide;
       }
       
       //Get initial image
       if($(kids[vars.currentSlide]).is('img')){
           vars.currentImage = $(kids[vars.currentSlide]);
       } else {
           vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
       }
       
       //Show initial link
       if($(kids[vars.currentSlide]).is('a')){
           $(kids[vars.currentSlide]).css('display','block');
       }
       
       //Set first background
       slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
       //Create caption
       slider.append(
$('

').css({ display:'none', opacity:settings.captionOpacity })
       );			

// Process caption function var processCaption = function(settings){ var nivoCaption = $('.nivo-caption', slider); if(vars.currentImage.attr('title') != && vars.currentImage.attr('title') != undefined){ var title = vars.currentImage.attr('title'); if(title.substr(0,1) == '#') title = $(title).html();

if(nivoCaption.css('display') == 'block'){ nivoCaption.find('p').fadeOut(settings.animSpeed, function(){ $(this).html(title); $(this).fadeIn(settings.animSpeed); }); } else { nivoCaption.find('p').html(title); } nivoCaption.fadeIn(settings.animSpeed); } else { nivoCaption.fadeOut(settings.animSpeed); } }

       //Process initial  caption
       processCaption(settings);
       
       //In the words of Super Mario "let's a go!"
       var timer = 0;
       if(!settings.manualAdvance && kids.length > 1){
           timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
       }
       //Add Direction nav
       if(settings.directionNav){
slider.append('
<a class="nivo-prevNav">'+ settings.prevText +'</a><a class="nivo-nextNav">'+ settings.nextText +'</a>
');
           //Hide Direction nav
           if(settings.directionNavHide){
               $('.nivo-directionNav', slider).hide();
               slider.hover(function(){
                   $('.nivo-directionNav', slider).show();
               }, function(){
                   $('.nivo-directionNav', slider).hide();
               });
           }
           
           $('a.nivo-prevNav', slider).live('click', function(){
               if(vars.running) return false;
               clearInterval(timer);
               timer = ;
               vars.currentSlide -= 2;
               nivoRun(slider, kids, settings, 'prev');
           });
           
           $('a.nivo-nextNav', slider).live('click', function(){
               if(vars.running) return false;
               clearInterval(timer);
               timer = ;
               nivoRun(slider, kids, settings, 'next');
           });
       }
       
       //Add Control nav
       if(settings.controlNav){
var nivoControl = $('
');
           slider.append(nivoControl);
           for(var i = 0; i < kids.length; i++){
               if(settings.controlNavThumbs){
                   var child = kids.eq(i);
                   if(!child.is('img')){
                       child = child.find('img:first');
                   }
                   if (settings.controlNavThumbsFromRel) {
                       nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('rel') + '" alt="" /></a>');
                   } else {
                       nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('src').replace(settings.controlNavThumbsSearch, settings.controlNavThumbsReplace) +'" alt="" /></a>');
                   }
               } else {
                   nivoControl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');
               }
               
           }
           //Set initial active link
           $('.nivo-controlNav a:eq('+ vars.currentSlide +')', slider).addClass('active');
           
           $('.nivo-controlNav a', slider).live('click', function(){
               if(vars.running) return false;
               if($(this).hasClass('active')) return false;
               clearInterval(timer);
               timer = ;
               slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
               vars.currentSlide = $(this).attr('rel') - 1;
               nivoRun(slider, kids, settings, 'control');
           });
       }
       
       //Keyboard Navigation
       if(settings.keyboardNav){
           $(window).keypress(function(event){
               //Left
               if(event.keyCode == '37'){
                   if(vars.running) return false;
                   clearInterval(timer);
                   timer = ;
                   vars.currentSlide-=2;
                   nivoRun(slider, kids, settings, 'prev');
               }
               //Right
               if(event.keyCode == '39'){
                   if(vars.running) return false;
                   clearInterval(timer);
                   timer = ;
                   nivoRun(slider, kids, settings, 'next');
               }
           });
       }
       
       //For pauseOnHover setting
       if(settings.pauseOnHover){
           slider.hover(function(){
               vars.paused = true;
               clearInterval(timer);
               timer = ;
           }, function(){
               vars.paused = false;
               //Restart the timer
               if(timer ==  && !settings.manualAdvance){
                   timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
               }
           });
       }
       
       //Event when Animation finishes
       slider.bind('nivo:animFinished', function(){ 
           vars.running = false; 
           //Hide child links
           $(kids).each(function(){
               if($(this).is('a')){
                   $(this).css('display','none');
               }
           });
           //Show current link
           if($(kids[vars.currentSlide]).is('a')){
               $(kids[vars.currentSlide]).css('display','block');
           }
           //Restart the timer
           if(timer ==  && !vars.paused && !settings.manualAdvance){
               timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
           }
           //Trigger the afterChange callback
           settings.afterChange.call(this);
       });
       
       // Add slices for slice animations
       var createSlices = function(slider, settings, vars){
           for(var i = 0; i < settings.slices; i++){

var sliceWidth = Math.round(slider.width()/settings.slices); if(i == settings.slices-1){ slider.append(

$('
').css({

left:(sliceWidth*i)+'px', width:(slider.width()-(sliceWidth*i))+'px', height:'0px', opacity:'0', background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%' }) ); } else { slider.append(

$('
').css({

left:(sliceWidth*i)+'px', width:sliceWidth+'px', height:'0px', opacity:'0', background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%' }) ); } }

       }

// Add boxes for box animations var createBoxes = function(slider, settings, vars){ var boxWidth = Math.round(slider.width()/settings.boxCols); var boxHeight = Math.round(slider.height()/settings.boxRows);

for(var rows = 0; rows < settings.boxRows; rows++){ for(var cols = 0; cols < settings.boxCols; cols++){ if(cols == settings.boxCols-1){ slider.append(

$('
').css({

opacity:0, left:(boxWidth*cols)+'px', top:(boxHeight*rows)+'px', width:(slider.width()-(boxWidth*cols))+'px', height:boxHeight+'px', background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((boxWidth + (cols * boxWidth)) - boxWidth) +'px -'+ ((boxHeight + (rows * boxHeight)) - boxHeight) +'px' }) ); } else { slider.append(

$('
').css({

opacity:0, left:(boxWidth*cols)+'px', top:(boxHeight*rows)+'px', width:boxWidth+'px', height:boxHeight+'px', background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((boxWidth + (cols * boxWidth)) - boxWidth) +'px -'+ ((boxHeight + (rows * boxHeight)) - boxHeight) +'px' }) ); } } } }

       // Private run method

var nivoRun = function(slider, kids, settings, nudge){ //Get our vars var vars = slider.data('nivo:vars');

           //Trigger the lastSlide callback
           if(vars && (vars.currentSlide == vars.totalSlides - 1)){ 

settings.lastSlide.call(this); }

           // Stop

if((!vars || vars.stop) && !nudge) return false;

//Trigger the beforeChange callback settings.beforeChange.call(this);

//Set current background before change if(!nudge){ slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat'); } else { if(nudge == 'prev'){ slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat'); } if(nudge == 'next'){ slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat'); } } vars.currentSlide++;

           //Trigger the slideshowEnd callback

if(vars.currentSlide == vars.totalSlides){ vars.currentSlide = 0; settings.slideshowEnd.call(this); } if(vars.currentSlide < 0) vars.currentSlide = (vars.totalSlides - 1); //Set vars.currentImage if($(kids[vars.currentSlide]).is('img')){ vars.currentImage = $(kids[vars.currentSlide]); } else { vars.currentImage = $(kids[vars.currentSlide]).find('img:first'); }

//Set active links if(settings.controlNav){ $('.nivo-controlNav a', slider).removeClass('active'); $('.nivo-controlNav a:eq('+ vars.currentSlide +')', slider).addClass('active'); }

//Process caption processCaption(settings);

// Remove any slices from last transition $('.nivo-slice', slider).remove();

// Remove any boxes from last transition $('.nivo-box', slider).remove();

if(settings.effect == 'random'){ var anims = new Array('sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft','sliceUpDown','sliceUpDownLeft','fold','fade',

               'boxRandom','boxRain','boxRainReverse','boxRainGrow','boxRainGrowReverse');

vars.randAnim = anims[Math.floor(Math.random()*(anims.length + 1))]; if(vars.randAnim == undefined) vars.randAnim = 'fade'; }

           //Run random effect from specified set (eg: effect:'fold,fade')
           if(settings.effect.indexOf(',') != -1){
               var anims = settings.effect.split(',');
               vars.randAnim = anims[Math.floor(Math.random()*(anims.length))];

if(vars.randAnim == undefined) vars.randAnim = 'fade';

           }

//Run effects vars.running = true; if(settings.effect == 'sliceDown' || settings.effect == 'sliceDownRight' || vars.randAnim == 'sliceDownRight' || settings.effect == 'sliceDownLeft' || vars.randAnim == 'sliceDownLeft'){ createSlices(slider, settings, vars); var timeBuff = 0; var i = 0; var slices = $('.nivo-slice', slider); if(settings.effect == 'sliceDownLeft' || vars.randAnim == 'sliceDownLeft') slices = $('.nivo-slice', slider)._reverse();

slices.each(function(){ var slice = $(this); slice.css({ 'top': '0px' }); if(i == settings.slices-1){ setTimeout(function(){ slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed, , function(){ slider.trigger('nivo:animFinished'); }); }, (100 + timeBuff)); } else { setTimeout(function(){ slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed); }, (100 + timeBuff)); } timeBuff += 50; i++; }); } else if(settings.effect == 'sliceUp' || settings.effect == 'sliceUpRight' || vars.randAnim == 'sliceUpRight' || settings.effect == 'sliceUpLeft' || vars.randAnim == 'sliceUpLeft'){ createSlices(slider, settings, vars); var timeBuff = 0; var i = 0; var slices = $('.nivo-slice', slider); if(settings.effect == 'sliceUpLeft' || vars.randAnim == 'sliceUpLeft') slices = $('.nivo-slice', slider)._reverse();

slices.each(function(){ var slice = $(this); slice.css({ 'bottom': '0px' }); if(i == settings.slices-1){ setTimeout(function(){ slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed, , function(){ slider.trigger('nivo:animFinished'); }); }, (100 + timeBuff)); } else { setTimeout(function(){ slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed); }, (100 + timeBuff)); } timeBuff += 50; i++; }); } else if(settings.effect == 'sliceUpDown' || settings.effect == 'sliceUpDownRight' || vars.randAnim == 'sliceUpDown' || settings.effect == 'sliceUpDownLeft' || vars.randAnim == 'sliceUpDownLeft'){ createSlices(slider, settings, vars); var timeBuff = 0; var i = 0; var v = 0; var slices = $('.nivo-slice', slider); if(settings.effect == 'sliceUpDownLeft' || vars.randAnim == 'sliceUpDownLeft') slices = $('.nivo-slice', slider)._reverse();

slices.each(function(){ var slice = $(this); if(i == 0){ slice.css('top','0px'); i++; } else { slice.css('bottom','0px'); i = 0; }

if(v == settings.slices-1){ setTimeout(function(){ slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed, , function(){ slider.trigger('nivo:animFinished'); }); }, (100 + timeBuff)); } else { setTimeout(function(){ slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed); }, (100 + timeBuff)); } timeBuff += 50; v++; }); } else if(settings.effect == 'fold' || vars.randAnim == 'fold'){ createSlices(slider, settings, vars); var timeBuff = 0; var i = 0;

$('.nivo-slice', slider).each(function(){ var slice = $(this); var origWidth = slice.width(); slice.css({ top:'0px', height:'100%', width:'0px' }); if(i == settings.slices-1){ setTimeout(function(){ slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed, , function(){ slider.trigger('nivo:animFinished'); }); }, (100 + timeBuff)); } else { setTimeout(function(){ slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed); }, (100 + timeBuff)); } timeBuff += 50; i++; }); } else if(settings.effect == 'fade' || vars.randAnim == 'fade'){ createSlices(slider, settings, vars);

var firstSlice = $('.nivo-slice:first', slider);

               firstSlice.css({
                   'height': '100%',
                   'width': slider.width() + 'px'
               });
   

firstSlice.animate({ opacity:'1.0' }, (settings.animSpeed*2), , function(){ slider.trigger('nivo:animFinished'); }); }

           else if(settings.effect == 'slideInRight' || vars.randAnim == 'slideInRight'){

createSlices(slider, settings, vars);

               var firstSlice = $('.nivo-slice:first', slider);
               firstSlice.css({
                   'height': '100%',
                   'width': '0px',
                   'opacity': '1'
               });
               firstSlice.animate({ width: slider.width() + 'px' }, (settings.animSpeed*2), , function(){ slider.trigger('nivo:animFinished'); });
           }
           else if(settings.effect == 'slideInLeft' || vars.randAnim == 'slideInLeft'){

createSlices(slider, settings, vars);

               var firstSlice = $('.nivo-slice:first', slider);
               firstSlice.css({
                   'height': '100%',
                   'width': '0px',
                   'opacity': '1',
                   'left': ,
                   'right': '0px'
               });
               firstSlice.animate({ width: slider.width() + 'px' }, (settings.animSpeed*2), , function(){ 
                   // Reset positioning
                   firstSlice.css({
                       'left': '0px',
                       'right': 
                   });
                   slider.trigger('nivo:animFinished'); 
               });
           }

else if(settings.effect == 'boxRandom' || vars.randAnim == 'boxRandom'){ createBoxes(slider, settings, vars);

var totalBoxes = settings.boxCols * settings.boxRows; var i = 0; var timeBuff = 0;

var boxes = shuffle($('.nivo-box', slider)); boxes.each(function(){ var box = $(this); if(i == totalBoxes-1){ setTimeout(function(){ box.animate({ opacity:'1' }, settings.animSpeed, , function(){ slider.trigger('nivo:animFinished'); }); }, (100 + timeBuff)); } else { setTimeout(function(){ box.animate({ opacity:'1' }, settings.animSpeed); }, (100 + timeBuff)); } timeBuff += 20; i++; }); } else if(settings.effect == 'boxRain' || vars.randAnim == 'boxRain' || settings.effect == 'boxRainReverse' || vars.randAnim == 'boxRainReverse' ||

                   settings.effect == 'boxRainGrow' || vars.randAnim == 'boxRainGrow' || settings.effect == 'boxRainGrowReverse' || vars.randAnim == 'boxRainGrowReverse'){

createBoxes(slider, settings, vars);

var totalBoxes = settings.boxCols * settings.boxRows; var i = 0; var timeBuff = 0;

// Split boxes into 2D array var rowIndex = 0; var colIndex = 0; var box2Darr = new Array(); box2Darr[rowIndex] = new Array(); var boxes = $('.nivo-box', slider); if(settings.effect == 'boxRainReverse' || vars.randAnim == 'boxRainReverse' ||

                  settings.effect == 'boxRainGrowReverse' || vars.randAnim == 'boxRainGrowReverse'){

boxes = $('.nivo-box', slider)._reverse(); } boxes.each(function(){ box2Darr[rowIndex][colIndex] = $(this); colIndex++; if(colIndex == settings.boxCols){ rowIndex++; colIndex = 0; box2Darr[rowIndex] = new Array(); } });

// Run animation for(var cols = 0; cols < (settings.boxCols * 2); cols++){ var prevCol = cols; for(var rows = 0; rows < settings.boxRows; rows++){ if(prevCol >= 0 && prevCol < settings.boxCols){ /* Due to some weird JS bug with loop vars being used in setTimeout, this is wrapped with an anonymous function call */ (function(row, col, time, i, totalBoxes) { var box = $(box2Darr[row][col]);

                               var w = box.width();
                               var h = box.height();
                               if(settings.effect == 'boxRainGrow' || vars.randAnim == 'boxRainGrow' ||
                                  settings.effect == 'boxRainGrowReverse' || vars.randAnim == 'boxRainGrowReverse'){
                                   box.width(0).height(0);
                               }

if(i == totalBoxes-1){ setTimeout(function(){ box.animate({ opacity:'1', width:w, height:h }, settings.animSpeed/1.3, , function(){ slider.trigger('nivo:animFinished'); }); }, (100 + time)); } else { setTimeout(function(){ box.animate({ opacity:'1', width:w, height:h }, settings.animSpeed/1.3); }, (100 + time)); } })(rows, prevCol, timeBuff, i, totalBoxes); i++; } prevCol--; } timeBuff += 100; } } }

// Shuffle an array var shuffle = function(arr){ for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x); return arr; }

       // For debugging
       var trace = function(msg){
           if (this.console && typeof console.log != "undefined")
               console.log(msg);
       }
       
       // Start / Stop
       this.stop = function(){
           if(!$(element).data('nivo:vars').stop){
               $(element).data('nivo:vars').stop = true;
               trace('Stop Slider');
           }
       }
       
       this.start = function(){
           if($(element).data('nivo:vars').stop){
               $(element).data('nivo:vars').stop = false;
               trace('Start Slider');
           }
       }
       
       //Trigger the afterLoad callback
       settings.afterLoad.call(this);

return this;

   };
       
   $.fn.nivoSlider = function(options) {
   
       return this.each(function(key, value){
           var element = $(this);
           // Return early if this element already has a plugin instance
           if (element.data('nivoslider')) return element.data('nivoslider');
           // Pass options to plugin constructor
           var nivoslider = new NivoSlider(this, options);
           // Store plugin object in this element's data
           element.data('nivoslider', nivoslider);
       });

};

//Default settings $.fn.nivoSlider.defaults = { effect: 'random', slices: 15, boxCols: 8, boxRows: 4, animSpeed: 500, pauseTime: 3000, startSlide: 0, directionNav: true, directionNavHide: true, controlNav: true, controlNavThumbs: false,

       controlNavThumbsFromRel: false,

controlNavThumbsSearch: '.jpg', controlNavThumbsReplace: '_thumb.jpg', keyboardNav: true, pauseOnHover: true, manualAdvance: false, captionOpacity: 0.8, prevText: 'Prev', nextText: 'Next', beforeChange: function(){}, afterChange: function(){}, slideshowEnd: function(){},

       lastSlide: function(){},
       afterLoad: function(){}

};

$.fn._reverse = [].reverse;

})(jQuery);