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.需要引入的文件

  1. jQuery
  2. 添加了cufon支持的jquery.nivo.slider.js
  3. cufon-yui.js
  4. 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即可看到如开头图片所示的效果

实例代码下载

Nivo Slider Slideshow实例(支持Cufon) 已下载 42 次

2条留言

  1. 我想知道那个特色图片是一张固定的图,还是可以随机不确定的图啊

评论功能已关闭