如何使Nivo Slider支持Cufon

最后更新于 2022 年 5 月 6 日

Nivo Slider最新版（v2.7.1）支持Cufon的方法如下。

打开jquery.nivo.slider.js，找到如下代码，（line99-line118）

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

替换成如下代码

// 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('opacity') != 0){
            nivoCaption.find('p').stop().fadeTo(settings.animSpeed, 0, function(){
                $(this).html(title);
                $(this).stop().fadeTo(settings.animSpeed, 1);
                settings.customChange.call(this);
            });
        } else {
            nivoCaption.find('p').html(title);
        }
        nivoCaption.stop().fadeTo(settings.animSpeed, settings.captionOpacity);
    } else {
        nivoCaption.stop().fadeTo(settings.animSpeed, 0);
    }
    settings.customChange.call(this);
}

在两个位置添加代码settings.customChange.call(this);

在Nivo Slider初始化代码中这样调用

$('#slider').nivoSlider({
    customChange: function(){
        Cufon.replace('.nivo-caption h5, .nivo-caption a', {
            fontFamily: 'New Cicle', 
            hover: 'true'
        });
    }
});

也就是在customChange属性中填写cufon的调用代码。

如果初始化代码中没有customChange就会报错，因为该属性没有默认值，防止出错的办法是给他一个默认值，滚动到文件结尾就可以看到默认值的定义，改成如下代码即可

$.fn.nivoSlider.defaults = {
    effect: 'random',
    slices: 15,
    boxCols: 8,
    boxRows: 4,
    animSpeed: 500,
    pauseTime: 3000,
    startSlide: 0,
    directionNav: true,
    directionNavHide: true,
    controlNav: true,
    controlNavThumbs: false,
    controlNavThumbsFromRel: false,
    controlNavThumbsSearch: '.jpg',
    controlNavThumbsReplace: '_thumb.jpg',
    keyboardNav: true,
    pauseOnHover: true,
    manualAdvance: false,
    captionOpacity: 0.8,
    prevText: 'Prev',
    nextText: 'Next',
    randomStart: false,
    beforeChange: function(){},
    afterChange: function(){},
    slideshowEnd: function(){},
    lastSlide: function(){},
    afterLoad: function(){},
    customChange: function() {}
};