Categories
Tutorials

Adding proper sliding effects to jQuery slideshow plugin ‘NivoSlider’

The Nivo Slider jQuery plugin by Dev7studios is a free slideshow gallery. It provides lots of fancy transition animations such as fade-in, fade-out or cutting the image into moving slices. For my site, I just want a simple sliding animation, that moves the image from the left or right edge of the slideshow box into the center. Nivo Slider already provides the effects slideInLeft and slideInRight. The slideInLeft effect looks great but the slideInRight animation is more like “growing” instead of “sliding”. We want to fix this, of course. So, this is a short tutorial on how to implement proper sliding effects.

Create your own transitions

Creating one’s own transitions is very simple thanks to just having to change a few CSS properties. In the following, you can find the slide-effect-function slideInFromRight — I altered the name so the original slideInRight effect stays untouched. Additionally I also wrote some lines for slideInFromTop and slideInFromBottom.

The original slideInRight effect fixes the image to the left and animates the width change from 0% to 100%. Instead of altering the width of the images, we simply position the image with position: relative and it’s top, right, bottom and right attributes at the very edges of the slideshow box, so it is no longer visible; then let jQuery smoothly reduce that offset to zero.

You can simply copy these snippets into your own Nivo Slider files or download the complete version including these effects right here.

[download id=”14″ format=”1″] demo

Update 5. March 2013

Version 3.2 is updated and fixed:

  • demo.html: Put all initiating js method calls into the $(document).ready call, so they won’t get executed before the page is ready
  • demo.html: Changed the deprecated jQuery live() from jQuery 1.7 to the proper mouseover() method
  • updated the Nivo Slider source version to the current 3.2

slideInFromRight

else if(currentEffect === 'slideInFromRight')
{
	createSlices(slider, settings, vars);

	firstSlice = $('.nivo-slice:first', slider);
	firstSlice.css({
		'width': '0px',
		'opacity': '1',
		'left': '',
		'right': '0px'
	});

	firstSlice.animate({ width: slider.width() + 'px' }, (settings.animSpeed*2), '', function(){
		firstSlice.css({
			'left': '0px',
			'right': ''
		});
		slider.trigger('nivo:animFinished');
	});
}

slideInFromLeft

This effect is actually unchanged, but to avoid any confusions, I simply duplicated it under the effects name slideInLeft.

else if(currentEffect === 'slideInFromRight')
{
	createSlices(slider, settings, vars);

	firstSlice = $('.nivo-slice:first', slider);
	firstSlice.css({ 'width': '0px',
		'opacity': '1',
		'left': '',
		'right': '0px'
	});

	firstSlice.animate({ width: slider.width() + 'px' }, (settings.animSpeed*2), '', function(){
		firstSlice.css({
			'left': '0px',
			'right': ''
		});
		slider.trigger('nivo:animFinished');
	 });
}

slideInFromTop

else if(currentEffect === 'slideInFromBottom')
{
	createSlices(slider, settings, vars);

	firstSlice = $('.nivo-slice:first', slider);
	firstSlice.css({
		'width': slider.width() + 'px',
		'height': slider.height() + 'px',
		'opacity': '1',
		'top': '-'+ slider.height() + 'px'
	});

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

 slideInFromBottom

else if(currentEffect === 'slideInFromTop')
{
	createSlices(slider, settings, vars);

	firstSlice = $('.nivo-slice:first', slider);
	firstSlice.css({
		'width': slider.width() + 'px',
		'height': slider.height() + 'px',
		'opacity': '1',
		'top': slider.height() + 'px'
	});

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

foldReverse

Vincent created the proper counterpart to the fold effect: foldReverse. You can easily add his code from below to the javascript file.

Using different effects for the ‘next’ and ‘previous’ buttons

Another nice addition is the idea of different effects to the Previous and Next buttons of the slider for diversity and to semantically support the idea of going forward and backward in the slideshow.

Usually, Nivo Slider simply shows the defalt effect option — either a specific effect like fadeIn or random. But you can overwrite that directive for specific images by providing them with a data-transition attribute.

We want to rewrite the data-transition attribute depending on which button was clicked. The solution is simple. To the previous and next buttons, we bind a mouseover event, which changes the attribute to our preferred effect. We add an additional mouseout event to both buttons to remove the attribute from all images in the slideshow, so the gallery can proceed with its default animation.

jQuery('#slider .nivo-nextNav').mouseover( function() {
	jQuery('#slider img').attr("data-transition","slideInFromRight");
});
jQuery('#slider .nivo-prevNav').mouseover( function() {
	jQuery('#slider img').attr("data-transition","slideInFromLeft");
});
// remove the data-transition attribute on mouseout
jQuery('#slider .nivo-prevNav, #slider .nivo-nextNav').mouseout( function() {
	jQuery('#slider img').attr("data-transition", "");
});

16 replies on “Adding proper sliding effects to jQuery slideshow plugin ‘NivoSlider’”

Hi liam, thanks a lot for bringing this issue to my attention!

The reason of the errors is that my script used the now deprecated jQuery method live() to bind the mouseover events for the prev- and next-buttons (and one occasion also in the Nivo Slider script itself). Since the files used Google’s hosted jQuery version, the plugin broke when that jQuery version got updated.

I just updated all the files to use the mouseover() and on() functions instead, tweaked the included demo.html and also updated the source of the Nivo Slider to the current version 3.2. Everything should work as intended now! You can download the new version above.

Best Regards,
Jörn

Nice, thanks.

Here is my contribution: “foldReverse”

Vincent.

else if (currentEffect === ‘foldReverse’){
createSlices(slider, settings, vars);
var sliceWidth = Math.round(slider.width()/settings.slices);
timeBuff = 50 * (settings.slices-1);
i = 0;

$(‘.nivo-slice’, slider).each(function(){
var slice = $(this);
var origWidth = slice.width();
slice.css({ top:’0px’, width:’0px’, left:(sliceWidth*(i+1))+’px’ });
var img = $(‘img’,slice).first();
img.attr(‘style’,img.attr(‘style’).replace(/;left:.*;/g,’;’));
img.css({ left:-(sliceWidth*(i+1))+’px’ });
if(i === 0){
setTimeout(function(){
slice.animate({ width:origWidth, left:’-=’+sliceWidth+’px’, opacity:’1.0′ }, settings.animSpeed, ”, function(){ slider.trigger(‘nivo:animFinished’); });
}, (50 + timeBuff));

} else {
setTimeout(function(){
slice.animate({ width:origWidth, left:’-=’+sliceWidth+’px’, opacity:’1.0′ }, settings.animSpeed);
}, (50 + timeBuff));
}
setTimeout(function(){
img.animate({left:’+=’+sliceWidth+’px’}, settings.animSpeed);
}, (50 + timeBuff));
timeBuff -= 50;
i++;
});
}

better version: it’s actually smoother with the animation of the img before the animation of the slice.

Vincent.

else if (currentEffect === 'foldReverse') {
    createSlices(slider, settings, vars);
    var sliceWidth = Math.round(slider.width() / settings.slices);
    timeBuff = 50 * (settings.slices - 1);
    i = 0;

    $('.nivo-slice', slider).each(function () {
        var slice = $(this);
        var origWidth = slice.width();
        slice.css({
            top: '0px',
            width: '0px',
            left: (sliceWidth * (i + 1)) + 'px'
        });
        var img = $('img', slice).first();
        img.attr('style', img.attr('style').replace(/;left:.*;/g, ';'));
        img.css({
            left: -(sliceWidth * (i + 1)) + 'px'
        });
        setTimeout(function () {
            img.animate({
                left: '+=' + sliceWidth + 'px'
            }, settings.animSpeed);
        }, (50 + timeBuff));
        if (i === 0) {
            setTimeout(function () {
                slice.animate({
                    width: origWidth,
                    left: '-=' + sliceWidth + 'px',
                    opacity: '1.0'
                }, settings.animSpeed, '', function () {
                    slider.trigger('nivo:animFinished');
                });
            }, (50 + timeBuff));

        } else {
            setTimeout(function () {
                slice.animate({
                    width: origWidth,
                    left: '-=' + sliceWidth + 'px',
                    opacity: '1.0'
                }, settings.animSpeed);
            }, (50 + timeBuff));
        }
        timeBuff -= 50;
        i++;
    });
}

Hi Vincent, thanks for the code!
I’ve been studying for exams lately and just now found the time to try it out. Works and looks great! I put a link in the post to your comment and fixed the display of the code in your comment. Hope you don’t mind.

Ive got an issue with the left img slide in from the left of the screen and not the slider:/. Something you hopefully can help me with ?

you mean the “slideInFromLeft” effect? Could you describe your issue? Did you download the files provided above and tried that slider example in the demo folder? It works fine for me. You should check that you have an up-to-date jQuery file. I just tried it with Google’s jQuery 1.9.1.

If that doesn’t solve the issue, you need to give me more information on what you changed and what exactly is not working.

Hi koushik,
you simply initiate the slider with the nivoSlider() function and add a few parameter values. The demo slideshow for download has this initiation:

$('#slider').nivoSlider({
			prevText: '',
			nextText: '',
			pauseTime: 3000,
			effect: 'slideInFromBottom'
		});

The slider will automatically start switching between available images every 3000 milliseconds with the effect “slideInFromBottom”.

Hi, its possible with slideinfromtop and slideinfrombottom,
that the image remains below that which is doing the animation has its own animation also, and not remain stationary?

Oh god, sorry for the late reply! Totally forgot about your comment…
Quickly checking the source, the original code doesn’t seem to offer anything to easily implement your wish for animating the latest image.

There is the

vars.currentImage

variable but it seems like it is set to the next incoming image before running the effects, so there isn’t any way to reference the previous image in the effects method without altering the code in a major way.

Vincent’s ‘foldReverse’ works for me but screws up a following ‘slideInFromRight’ effect, so I have had to remove his code.

Pity.

I could not make the “Using different effects for the ‘next’ and ‘previous’ buttons” script work. Where should I put it?
Thank you

Leave a Reply