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

Orbit Jquery image slide

Image sliders maken websites vaak nog leuker door een stukje interactie. Daarnaast biedt het mogelijkheden om meer beeldmateriaal met een beperkte hoeveelheid ruimte te tonen. Het nadeel is echter dat veel image sliders te groot zijn. Nou ja, te groot niet maar groter dan gewenst. Soms is er wel een stripped-down versie met weinig gewicht maar zeker als je wat leuke effecten erin wilt worden ze snel groter.

Orbit – Jquery image slider plugin
Met een gewicht van 3.2 KB een lekker compact geval. De look en feel zijn echter fantastisch.

Enkele functionaliteiten

  • Automatische slideshow pauzeren en weer activeren (rechtsboven)
  • Naar andere afbeelding gaan dmv. de ronde icoontjes linksboven
  • Weergave hoe lang het nog duurt voor de volgende afbeelding komt (rechtsboven)
  • Ondertitels mogelijk
  • Prima werkend in Chrome, Safari en Firefox 3.5+ (getest in IE7+)

Bezoek de site en bekijk de demo