Caption hide/show sliding/hovering about nivo-slider-jquery

[MarcusJT]

PS - caption could fade in/out instead of sliding?

[dynumo]

I got this working (mostly)...

I added:

if(settings.captionHide){
$('.nivo-caption', slider).hide();
slider.hover(function(){
    $('.nivo-caption', slider).fadeIn ("slow")
    }, function(){
    $('.nivo-caption', slider).fadeOut ("slow")
});

}

To both the part of the jquery.nivo.slider.js file marked //Process initial caption, and the part marked //Process caption (at the end of those parts), then I added:

captionHide:true,

To the part marked //Default settings.

The only issues where that with this fix, if a slide doesn't have a caption, it shows the one from the previous slide, and if you navigate using the directional navigation, you have to un-hover, and then re-hover for the slider to get the updated caption to show.

Hope that helps! And if anybody else would like to develop upon my fix further, feel free =)

[dynumo]

^ you could also use the above with .slideDown and .slideUp, in place of .fadeIn and .fadeOut.

[cjmcclean]

Well I made some tweaks to the base script (jquery.nivo.slider.js) to address some of your additional functionality as I needed it as well for a client project.

This won't extend the slider's core functionality like dynumo's changes will, but it's working in OS X FF, Chrome, Safari & Win IE8 & IE7, FF, Chrome.

!!! As always, back up your originals. !!!

To the section that starts:
//Process initial caption

if(vars.currentImage.attr('title') != ''){
     var title = vars.currentImage.attr('title');
     
     if(title.substr(0,1) == '#') title = $(title).html(); //alert(title);
     $('.nivo-caption p', slider).html(title);                  
     // $('.nivo-caption', slider).fadeIn(settings.animSpeed);
}

To stop the caption from appearing on hover of the directionNav I made some changes here as well.

To the section that starts:
//Add Direction nav

if(settings.directionNav){
     slider.after('
PrevNext
 ');
            
     //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').live('click', function(){
          if(vars.running) return false;
          clearInterval(timer);
          timer = '';
          vars.currentSlide-=2;
          nivoRun(slider, kids, settings, 'prev');
     });
            
     $('a.nivo-nextNav').live('click', function(){
          if(vars.running) return false;
          clearInterval(timer);
          timer = '';
          nivoRun(slider, kids, settings, 'next');
     });
}

Then to get it to appear on hover I only had to make 2 small mods.

To the section that starts:
//For pauseOnHover setting

if(settings.pauseOnHover){
     slider.hover(function(){
          vars.paused = true;
          clearInterval(timer);
          timer = '';
                
          $('.nivo-caption', slider).fadeIn(settings.animSpeed);
     }, function(){
          $('.nivo-caption', slider).fadeOut(settings.animSpeed);
                
          vars.paused = false;
          //Restart the timer
          if(timer == '' && !settings.manualAdvance){
               timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
          }
     });
}

Finally for the section that starts:
//Process caption

if(vars.currentImage.attr('title') != ''){
     var title = vars.currentImage.attr('title');
     if(title.substr(0,1) == '#') title = $(title).html(); //alert(title);
                    
     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);
}

And that's it!

I know it may seem like a lot, but really it amounts to commenting out 3 lines, deleting a couple calls and inserting fadeIn/fadeOut's for the pauseOnHover.