No more caption fading in 3.0.1?

[nevius]

Hey

In previous Nivo-Slider versions, the caption used to fade out and in again when transitioning from one image with a caption to another.

Now in the new version, the caption just changes abruptly. It only fades now when you go from an image without a caption to one with a caption. It doesn't fade when transitioning between two images that both have a caption.

Why did you change this?

Greetings Nevius

[briandmcnabb]

I cannot be sure but I'm not sure that this was an intentional change. I suspect that this problem is related to the issues described here and here on the Nivo support site.

This seems to be a rather significant bug to have made it all the way into a release.

[foodgy]

Now in the new version, the caption just changes abruptly. It only fades now when you go from an image without a caption to one with a caption. It doesn't fade when transitioning between two images that both have a caption.

That's true. First caption fades in, but second, third and etc dont have any animation. NivoSlider 3.0.1

[briandmcnabb]

I added the following to my stylesheet and it fixed all the issues described above.

.nivoSlider img {
    max-width: none;
}

Hope it helps.

[foodgy]

Hope it helps.

Nope :( Just tried to add html captions to every slide in NivoSlider demo. Same bug.

[leeroybrun]

If you want the caption to fade out and in again between images transitions, do the following :

Open the jquery.nivo.slider.js file.

Replace :

        // Useful variables. Play carefully.
        var vars = {
            currentSlide: 0,
            currentImage: '',
            totalSlides: 0,
            running: false,
            paused: false,
            stop: false,
            controlNavEl: false
        };

with :

        // Useful variables. Play carefully.
        var vars = {
            currentSlide: 0,
            currentImage: '',
            currentCaption: 1,
            totalSlides: 0,
            running: false,
            paused: false,
            stop: false,
            controlNavEl: false
        };

And replace :

        //Create caption
        slider.append($('<div class="nivo-caption"></div>'));

        // 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'){
                    setTimeout(function(){
                        nivoCaption.html(title);
                    }, settings.animSpeed);
                } else {
                    nivoCaption.html(title);
                    nivoCaption.stop().fadeIn(settings.animSpeed);
                }
            } else {
                nivoCaption.stop().fadeOut(settings.animSpeed);
            }
        }

with :

        //Create caption
        slider.append($('<div class="nivo-caption nivo-caption-1"></div>'));
        slider.append($('<div class="nivo-caption nivo-caption-2"></div>'));

        // Process caption function
        var processCaption = function(settings){
            var nivoCaption = $('.nivo-caption-'+vars.currentCaption, slider);
            var previousNivoCaption = $('.nivo-caption-'+((vars.currentCaption == 1) ? 2 : 1), 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(previousNivoCaption.css('display') == 'block'){
                    setTimeout(function(){
                        nivoCaption.html(title);
                        previousNivoCaption.stop().fadeOut(settings.animSpeed);
                        nivoCaption.stop().fadeIn(settings.animSpeed);
                        vars.currentCaption = ((vars.currentCaption == 1) ? 2 : 1);
                    }, settings.animSpeed);
                } else {
                    nivoCaption.html(title);
                    nivoCaption.stop().fadeIn(settings.animSpeed);
                    vars.currentCaption = ((vars.currentCaption == 1) ? 2 : 1);             
                }
            } else {
                previousNivoCaption.stop().fadeOut(settings.animSpeed);
            }
        }

Clear your browser's cache, reload your page and it should be fine. :-)

Enjoy !

[derrybirkett]

Hi,

I am currently on annual leave until 1st September, I look forward to replying to your emails then.

Thanks, and Enjoy the Summer!
Derry

[Paul-Morris]

leeroybrun thanks for the fix! That was driving me crazy. I loathed the idea of having to turn my text into an image to get it to fade properly!

[cKehres]

is it fixed?

[iansayre]

Hey leeroybrun, thanks for that awesome fix.

[leeroybrun]

You're welcome. :)

Le 20 sept. 2012 à 23:00, iansayre notifications@github.com a écrit :

Hey leeroybrun, thanks for that awesome fix.

— Reply to this email directly or view it on GitHubhttps://github.com/gilbitron/Nivo-Slider/issues/289#issuecomment-8745428.

[mrblackcard]

The fix didn't work for me. : (

[featheredowl]

leeroybrun that fix worked perfectly. Thanks

[paulotrajano83]

Thanks a lot, leeroybrun. It fits like a glove. ;)

[BrendonKoz]

Even now this still works. However, if you ever want to change this functionality making changes to the core might not be the best way. You can use the internal methods to the plugin as was found here, for creating custom animation effects for the captions: http://www.soslignes-ecrivain-public.fr/More-animation-for-your-Nivo-Slider.html

I chose to use your fix (thanks!) simply because I know that the functionality of my captions will never change where it's being used.

[jmarti]

Thanks. It works!

[Robert-rx2-Ross]

Anyone able to get this to work with NivoSlider 3.2?