Freezing with multiple captions

[juliangav]

When I added a caption to every single slide, my slider begins to freeze. Here's an example: http://hoolyon.com/slider/demo/demo.html

Has anyone else had this issue?

[tjbeatrice]

I had this exact issue just this morning...

It is only a problem when back to back slides have captions. If you have a slide without a caption, and then a slide with a caption there is no problem. But any two slides which load back to back both have captions - problem.

I tracked down the problem to an issue with the way animations are being stopped using the jquery.stop() method. If you look at the original source for the slider (jquery.nivo.slider.js) around line 96 is a function for "processCaption":

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

        } else {
            nivoCaption.find('p').html(title);
        }                   
        nivoCaption.stop().fadeIn(settings.animSpeed);
    } else {
        nivoCaption.stop().fadeOut(settings.animSpeed);
    }
}

I removed all of the stop() calls to get this:

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

I am sure the stop() call is there for a good reason, but my initial testing and looking through jQuery docs did not lead me to believe that removing them would be a problem. Nice to hear from developer to see if this is an acceptable change.

[WingEraser]

It also happens with multiple titles.
Putting transitions like 'slideInLeft' will break the second image.
I've used the demo.html from the download.

@above
Thanks for the solutions, it works perfectly.

[gilbitron]

Thanks for the suggestion but the stop() calls were put in to fix the flashing caption bug (where if you went to another tab and came back a while later the caption would flash loads of times). Obviously it needs a bit more work to stop the captions freezing, but removing the stop() calls is not the solution.

[lucasRolff]

I would like to see an solution on this some day, because I'm having same problem, I have captions on all slides, which makes it freeze :(

But I really love Nivo Slider!

[tjbeatrice]

Thanks, Gilbitron for the response. I figured there was a reason for the stop() calls.

At this point, I am going to roll with my solution because I am having a hard time reproducing your bug. But I will be sure to keep my eyes peeled for a permanent solution.

[hiddenpearls]

@tjbeatrice your time was worthy for me ;) Solved same issue in my project. Nivo is great slider no doubt !

[antoniocici]

Thanks a lot @tjbeatrice ;) Your suggestion was really useful for me ;)
I also made another modification to the code because after few cycles the < p > opacity into the nivo-caption div slowly decrease from captionOpacity to 0. So I decided to change the fadeIn method with the fadeTo one as follow:

// 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').stop().fadeOut(settings.animSpeed, function(){
//                      $(this).html(title);
//                      $(this).stop().fadeIn(settings.animSpeed);
//                  });
            nivoCaption.find('p').fadeOut(settings.animSpeed, function(){
                $(this).html(title);
                $(this).fadeTo(settings.animSpeed, settings.captionOpacity);
            });
        } else {
            nivoCaption.find('p').html(title);
        }                   
//              nivoCaption.stop().fadeIn(settings.animSpeed);
        nivoCaption.fadeTo(settings.animSpeed, settings.captionOpacity);
    } else {
//              nivoCaption.stop().fadeOut(settings.animSpeed);
        nivoCaption.fadeOut(settings.animSpeed);
    }
}

With this small change I solve the problem.
Thanks to you all :)

[antoniocici]

Now I've tried to use the stop method with the fadeTo and the fade freezing just disappear.
The following code works without the freezing effect ;) just by swapping the fadeIn with the fadeTo

// 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).stop().fadeTo(settings.animSpeed, settings.captionOpacity);
            });
        } else {
            nivoCaption.find('p').html(title);
        }                   
        nivoCaption.stop().fadeTo(settings.animSpeed, settings.captionOpacity);
    } else {
        nivoCaption.fadeOut(settings.animSpeed);
    }
}

[katrina1]

Hi everyone,

I'd like to try this bug fix but within my javascript file (jquery.nivo.slider.pack.js) the text is all compressed into one extremely long string and I cannot see the processCaption code anywhere in order to modify it. Even when I do a search/find for the text 'processCaption' it doesn't seem to be within the text anywhere.

Any guidance would be greatly appreciate.

Thanks in advance!

Katrina

[antoniocici]

Hi Katrina,

you should search for:

.stop().fadeIn(b.animSpeed)

and replace it with:

.stop().fadeTo(b.animSpeed, b.captionOpacity)

As you can see, there are two substitution that should be made.

I hope this will be helpful for you :)