Nivo Slider是一款基于JQuery的slideshow，长的漂亮简单实用，融入cufon技术后更加美观，这里介绍如何将cufon和Nivo Slider结合到一起，方法来源于一款Wordpress主题。实际效果如下图所示
目录
使Nivo Slider支持Cufon
Nivo Slider版本为2.5.2，并不是最新版，但可以很容易的加入cufon，打开jquery.nivo.slider.js，按照下面代码修改
// 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.children('.nivo-caption-inner').fadeOut(settings.animSpeed, function(){
$(this).html(title);
$(this).fadeIn(settings.animSpeed);
settings.customChange.call(this);
});
} else {
nivoCaption.children('.nivo-caption-inner').html(title);
}
nivoCaption.fadeIn(settings.animSpeed);
} else {
nivoCaption.fadeOut(settings.animSpeed);
}
settings.customChange.call(this);
}代码两个地方加入了
settings.customChange.call(this);
这是让nivo slider支持cufon的关键。
这样在初始化nivo slider时，就能将初始化cufon的代码加进去，如下
$(window).load(function() {
$('#slider').nivoSlider({
customChange: function(){
Cufon.replace('.nivo-caption h5, .nivo-caption a', {
fontFamily: 'New Cicle',
hover: 'true'
});
}
});
});
具体使用cufon哪款字体根据自己喜好而定。
如何将这款slideshow应用到Wordpress主题中
1. 编辑functinos.php，加入如下代码，这样可以通过后台创建每个slide。注意替换theme-short-name
function my_post_type_slider() {
register_post_type('slider', array(
'label' => __('Slides'),
'singular_label' => __('Slide', 'theme-short-name'),
'_builtin' => false,
'exclude_from_search' => true, // Exclude from Search Results
'capability_type' => 'page',
'public' => true,
'show_ui' => true,
'show_in_nav_menus' => false,
'rewrite' => array(
'slug' => 'slide-view',
'with_front' => FALSE,
),
'query_var' => "slide", // This goes to the WP_Query schema
'menu_icon' => get_template_directory_uri() . '/includes/images/icon_slides.png',
'supports' => array(
'title',
'custom-fields',
'editor',
'thumbnail')
)
);
}
add_action('init', 'my_post_type_slider');这样后台的菜单中会出现slider这一项，就可以像添加文章一样建立或编辑单张幻灯片的文字和图片，图片是通过设定featured image添加的。
2.新建一个文件命名为slider.php，里面存放产生slideshow HTML结构的代码，在模板中通过include包含该文件，就可以调用幻灯片了。slider.php内容如下
<div id="slider" class="nivoSlider">
<?php $posts_counter = 0; ?>
<?php
query_posts("post_type=slider&posts_per_page=-1&post_status=publish");
while (have_posts()) : the_post();
$posts_counter++;
?>
<?php
$custom = get_post_custom($post->ID);
$url = get_post_custom_values("slider-url");
$sl_thumb = $custom["thumb"][0];
$sl_image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'slider-post-thumbnail');
$tab_title = get_post_custom_values("tab-title");
?>
<?php if (has_post_thumbnail($the_ID) || $sl_thumb != "") { ?>
<?php if ($url != "") { ?>
<?php
if ($sl_thumb != "") {
echo "<a href='" . $url[0] . "'>";
echo "<img src='" . $sl_thumb . "' alt='";
echo $tab_title[0];
echo "' title='#sliderCaption" . $posts_counter . "' />";
echo "</a>";
} else {
echo "<a href='" . $url[0] . "'>";
echo "<img src='";
echo $sl_image_url[0];
echo "' alt='";
echo $tab_title[0];
echo "' title='#sliderCaption" . $posts_counter . "' />";
echo "</a>";
}
?>
<?php } else { ?>
<?php
if ($sl_thumb != "") {
echo "<img src='" . $sl_thumb . "' alt='";
echo $tab_title[0];
echo "' title='#sliderCaption" . $posts_counter . "' />";
} else {
echo "<img src='";
echo $sl_image_url[0];
echo "' alt='";
echo $tab_title[0];
echo "' title='#sliderCaption" . $posts_counter . "' />";
}
?>
<?php } ?>
<?php } ?>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</div>
<?php $posts_counter = 0; ?>
<?php
query_posts("post_type=slider&posts_per_page=-1&post_status=publish");
while (have_posts()) : the_post();
$posts_counter++;
?>
<?php
$custom = get_post_custom($post->ID);
?>
<div id="sliderCaption<?php echo $posts_counter ?>" class="nivo-html-caption">
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>3.需要引入的文件
- jQuery
- 添加了cufon支持的jquery.nivo.slider.js
- cufon-yui.js
- cufon字体文件，本例中使用的是New_Cicle_400.font.js 在footer或者header中引入这些文件都可以，但nivo slider的初始化代码一定要放在他们后面
4.将slider的css添加到主题的styles.css或者自定义css中。
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;
}
/* The slices in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
/* Caption styles */
.nivo-caption {
background: none;
color: #fff;
opacity: 0.8; /* Overridden by captionOpacity setting */
position: absolute;
top: 187px;
left: 45px;
z-index: 89;
}
.nivo-caption .nivo-caption-inner {
padding:0;
margin:0;
}
.nivo-caption a {
background: #cc0000;
display: inline-block !important;
height: 41px;
padding: 0 15px;
line-height: 40px;
font-size: 23px;
text-decoration: none;
color: #fff;
}
.nivo-caption a:hover {
color: #000;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
height: 17px;
text-align: right;
position: absolute;
top: 460px;
right: 14px;
z-index: 99;
}
.nivo-controlNav a {
background: url(images/pagination.png) no-repeat 0% 0%;
display: inline-block !important;
position: relative;
width: 17px;
height: 17px;
overflow: hidden;
margin: 0 0 0 3px;
line-height: 0;
font-size: 0;
text-decoration: none;
z-index: 99;
cursor: pointer;
vertical-align: top;
}
.nivo-controlNav a.active, .nivo-controlNav a:hover {
background-position: 0% -17px;
}
.nivo-directionNav {
}
.nivo-directionNav a {
position:absolute;
display:block;
width:36px;
height:35px;
text-indent:-9999px;
border:0;
top:45%;
background:url(images/direction_nav.png) no-repeat 0 0;
}
a.nivo-nextNav {
right:15px;
background-position:-36px 0;
}
a.nivo-nextNav:hover {
background-position:-36px -35px;
}
a.nivo-prevNav {
left:15px;
background-position:0 0;
}
a.nivo-prevNav:hover {
background-position:0 -35px;
}
#slider .nivo-controlNav img {
display:inline; /* Unhide the thumbnails */
position:relative;
margin-right:10px;
width:120px;
height:auto;
}
5.初始化nivo slider
<script type="text/javascript">
jQuery(window).load(function() {
// nivoslider init
jQuery('#slider').nivoSlider({
effect: '<?php echo of_get_option('sl_effect'); ?>',
slices:<?php echo of_get_option('sl_slices'); ?>,
boxCols:<?php echo of_get_option('sl_box_columns'); ?>,
boxRows:<?php echo of_get_option('sl_box_rows'); ?>,
animSpeed:<?php echo of_get_option('sl_animation_speed'); ?>,
pauseTime:<?php echo of_get_option('sl_pausetime'); ?>,
directionNav:<?php echo of_get_option('sl_dir_nav'); ?>,
directionNavHide:<?php echo of_get_option('sl_dir_nav_hide'); ?>,
controlNav:<?php echo of_get_option('sl_control_nav'); ?>,
captionOpacity:<?php $sl_caption_opacity = of_get_option('sl_caption_opacity');
if ($sl_caption_opacity != '') {
echo of_get_option('sl_caption_opacity');
} else {
echo '0';
} ?>,
customChange: function(){
Cufon.replace('.nivo-caption h5, .nivo-caption a', { fontFamily: 'New Cicle', hover: 'true' });
}
});
});
</script>of_get_option()是调用theme options中存储的slide参数，目的是让用户可以更改幻灯片的属性值，如果使用不同的主题框架调用方法也会不同。使用Options Framework Theme创建theme options，就要通过of_get_option(ID)取值。
如果不想创建后台功能，直接调用最简单的初始化代码就可以，或者直接写入需要定义的属性，参考Nivo Slider JQuery Plugin Usage 。
本例JQuery实现的代码下载,运行压缩包中的demo/custom.html即可看到如开头图片所示的效果
实例代码下载
[download id=19]
这个非常实用
我想知道那个特色图片是一张固定的图，还是可以随机不确定的图啊