/* * 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(''); //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(''); } else { nivocontrol.append(''); } } else { nivocontrol.append(''+ (i + 1) +''); } } //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: 12, boxcols: 8, boxrows: 4, animspeed: 500, pausetime: 3000, startslide: 0, directionnav: true, directionnavhide: false, 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);