Jquery Nivo Slider

In een recent project heb ik gebruik gemaakt van de Nivo Slider. Een prettige slider die redelijk snel implementeert en vanuit de basis over een goede set functies beschikt.

Nu wilde onze opdrachtgever dat de slideshow alleen één afbeelding naar voren ging als je met je muis over de slideshow ging wat anders was dan we vooraf dachten (anders was de Nivo Slider er waarschijnlijk niet in gekomen). Al snel concludeerde ik dat de Nivo Slider dit niet ondersteunde. Ik heb toen de code iets aangepast. Je kunt nu een extra parameter meegeven aan de Nivo Slider settings;

nextOnHover: true

De volledige implementatie ziet er dan als volgt uit;

public.js

$('#topping_slider').nivoSlider({
	effect:'fade',
	animSpeed:200,
	directionNav:false,
	controlNav:false,
	keyboardNav:false,
	pauseOnHover:false,
	manualAdvance:true,
	captionOpacity:0.8,
	nextOnHover:true
});

jquery.nivo.slider.js

/*
 * jQuery Nivo Slider v2.1
 * http://nivo.dev7studios.com
 *
 * Copyright 2010, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 *
 * May 2010 - Pick random effect from specified set of effects by toronegro
 * May 2010 - controlNavThumbsFromRel option added by nerd-sh
 * May 2010 - Do not start nivoRun timer if there is only 1 slide by msielski
 * April 2010 - controlNavThumbs option added by Jamie Thompson (http://jamiethompson.co.uk)
 * March 2010 - manualAdvance option added by HelloPablo (http://hellopablo.co.uk)
 */

(function($) {

	$.fn.nivoSlider = function(options) {

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

		return this.each(function() {
			//Useful variables. Play carefully.
			var vars = {
				currentSlide: 0,
				currentImage: '',
				totalSlides: 0,
				randAnim: '',
				running: false,
				paused: false,
				stop:false
			};

			//Get this slider
			var slider = $(this);
			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');

			//Add initial slices
			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' }) ); } else { slider.append( $('
').css({ left:(sliceWidth*i)+'px', width:sliceWidth+'px' }) ); } } //Create caption slider.append( $('

').css({ display:'none', opacity:settings.captionOpacity }) ); //Process initial caption if(vars.currentImage.attr('title') != ''){ var title = vars.currentImage.attr('title'); if(title.substr(0,1) == '#') title = $(title).html(); $('.nivo-caption p', slider).html(title); $('.nivo-caption', slider).fadeIn(settings.animSpeed); } //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'); }); } if(settings.nextOnHover){ $('#'+slider.attr('id')).live("mouseenter", 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); }); }); function nivoRun(slider, kids, settings, nudge){ //Get our vars var vars = slider.data('nivo:vars'); 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++; if(vars.currentSlide == vars.totalSlides){ vars.currentSlide = 0; //Trigger the slideshowEnd callback 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 acitve links if(settings.controlNav){ $('.nivo-controlNav a', slider).removeClass('active'); $('.nivo-controlNav a:eq('+ vars.currentSlide +')', slider).addClass('active'); } //Process caption if(vars.currentImage.attr('title') != ''){ var title = vars.currentImage.attr('title'); if(title.substr(0,1) == '#') title = $(title).html(); if($('.nivo-caption', slider).css('display') == 'block'){ $('.nivo-caption p', slider).fadeOut(settings.animSpeed, function(){ $(this).html(title); $(this).fadeIn(settings.animSpeed); }); } else { $('.nivo-caption p', slider).html(title); } $('.nivo-caption', slider).fadeIn(settings.animSpeed); } else { $('.nivo-caption', slider).fadeOut(settings.animSpeed); } //Set new slice backgrounds var i = 0; $('.nivo-slice', slider).each(function(){ var sliceWidth = Math.round(slider.width()/settings.slices); $(this).css({ height:'0px', opacity:'0', background: 'url('+ vars.currentImage.attr('src') +') no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%' }); i++; }); if(settings.effect == 'random'){ var anims = new Array("sliceDownRight","sliceDownLeft","sliceUpRight","sliceUpLeft","sliceUpDown","sliceUpDownLeft","fold","fade"); 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 = $.trim(anims[Math.floor(Math.random()*anims.length)]); } //Run effects vars.running = true; if(settings.effect == 'sliceDown' || settings.effect == 'sliceDownRight' || vars.randAnim == 'sliceDownRight' || settings.effect == 'sliceDownLeft' || vars.randAnim == 'sliceDownLeft'){ 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'){ 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'){ 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'){ 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'){ var i = 0; $('.nivo-slice', slider).each(function(){ $(this).css('height','100%'); if(i == settings.slices-1){ $(this).animate({ opacity:'1.0' }, (settings.animSpeed*2), '', function(){ slider.trigger('nivo:animFinished'); }); } else { $(this).animate({ opacity:'1.0' }, (settings.animSpeed*2)); } i++; }); } } }; //Default settings $.fn.nivoSlider.defaults = { effect:'random', slices:15, 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, beforeChange: function(){}, afterChange: function(){}, slideshowEnd: function(){}, nextOnHover: false }; $.fn._reverse = [].reverse; })(jQuery);

Regel 68 tot 75 zijn toegevoegd

Ga naar de website van de originele Nivo Slider

Geef een reactie

Jouw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *