Using Cufon with Nivo slider

Quick hack for getting cufon working with nivo slider

An example of this in use can be seen on one of our themes here: http://tf.dtbaker.com.au/preview/?theme=18&style=1 (look at the rotating images with nice font overlay)

About line 300 where you see this code:

            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);
            }

Change it to this code:

            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);
                         settings.customChange.call(this);
                    });
                } else {
                    $('.nivo-caption p', slider).html(title);
                }                    
                $('.nivo-caption', slider).fadeIn(settings.animSpeed);
            } else {
                $('.nivo-caption', slider).fadeOut(settings.animSpeed);
            }
            settings.customChange.call(this);

Then when you initialize nivo slider, do it like this:

<script type="text/javascript">
$(function() {
    $('#slider').nivoSlider({
            effect:'fold',
            customChange: function(){
                Cufon.replace('.nivo-caption');
            }
    });
});
</script>