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