NextGen Gallery：自定义gallery模板实例（添加Highslide特效）

最后更新于 2012 年 11 月 20 日

前面介绍了NextGen Gallery 自定义模板的方法，这里就现学现卖一下，一个自定义的gallery模板实例，效果请看这里。

gallery模板的文件是gallery.php，在
wp-content/plugins/nextgen-gallery/view
目录下找到这个文件，拷贝到主题的nggallery目录下，这里只讨论模板怎么写，如何实现自定义模板请参考NextGen Gallery 自定义模板。

创建自定义的gallery模板

1. gallery.php重命名为gallery-template1.php，代码如下

<?php
/**
  Template Page for the gallery overview

  Follow variables are useable :

  $gallery     : Contain all about the gallery
  $images      : Contain all images, path, title
  $pagination  : Contain the pagination content

  You can check the content when you insert the tag <?php var_dump($variable) ?>
  If you would like to show the timestamp of the image ,you can use <?php echo $exif['created_timestamp'] ?>
 * */
?>
<?php if (!defined('ABSPATH')) die('No direct access allowed'); ?><?php if (!empty($gallery)) : ?>
    <div class="ngg-galleryoverview gallery-style1" id="<?php echo $gallery->anchor ?>">

        <?php if ($gallery->show_slideshow) { ?>
            <!-- Slideshow link -->
            <div class="slideshowlink">
                <a class="slideshowlink" href="<?php echo $gallery->slideshow_link ?>">
                    <?php echo $gallery->slideshow_link_text ?>
                </a>
            </div>

        <?php } ?>

        <?php if ($gallery->show_piclens) { ?>
            <!-- Piclense link -->
            <div class="piclenselink">
                <a class="piclenselink" href="<?php echo $gallery->piclens_link ?>">
                    <?php _e('[使用PicLens查看图片]', 'nggallery'); ?>
                </a>
            </div>

        <?php } ?>

        <!-- Thumbnails -->
        <?php foreach ($images as $image) : ?>
            <div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box" <?php echo $image->style ?> >
                <div class="ngg-gallery-thumbnail" >
                    <a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
                        <?php if (!$image->hidden) { ?>
                            <img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
                        <?php } ?>
                    </a>
                </div>
                <div class="ngg-albumtitle"><a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode; ?>><?php echo $image->alttext ?></a></div>
            </div>

            <?php if ($image->hidden) continue; ?>
            <?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
		<br style="clear: both" />
            <?php } ?>

        <?php endforeach; ?>

        <!-- Pagination -->
        <?php echo $pagination ?>
    </div>

<?php endif; ?>

2. 最重要的是添加自己的样式，将样式写到主题的styles.css中

.gallery-style1 .ngg-gallery-thumbnail-box{
	width:170px;
	display:inline-block;
	vertical-align:top;
	float:none;
	padding: 0 0 10px;
}
#ie7 .gallery-style1 .ngg-gallery-thumbnail-box {
	display:inline;
	line-height:150%;
}
#ie6 .gallery-style1 .ngg-gallery-thumbnail-box {
	display:block;
	height:220px;
	float:left;
}
.gallery-style1 .ngg-gallery-thumbnail {
	float:none;
	text-align:center;
}
.gallery-style1 .ngg-gallery-thumbnail img{
	display:inline;
	border:3px solid #CCCCCC;
	-webkit-border-radius: 8px;
	-khtml-border-radius:8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
.gallery-style1 .ngg-gallery-thumbnail img:hover{
	border-color:#999999;
	background:none;
}
.gallery-style1 .ngg-albumtitle {
	font-size:12px;
	font-weight:normal;
	text-align:center;
}
.gallery-style1 .ngg-navigation {
	padding-bottom:10px;
}

为了能看到效果，到后台的Gallery->Options->Gallery中，确保“The gallery will open the ImageBrowser instead the effect.”这一项没有选中。此时将图集插入页面或者文章，就可以看到更改后效果了

集成Highslide特效

1. 首先下载Highslide Js

2. 解压文件，将highslide目录拷贝到主题目录下的js目录中，将highslide.css和graphics拷贝到主题目录下的css目录中，你可以根据自己主题的结构放到其他位置，但highslide.css和graphics应该在同一目录下。

3. 打开主题的header.php，引入highslide.css。

<?php if ( is_page() || is_single() ) : ?>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/css/highslide.css" />
<?php endif; ?>

4 . 打开主题的footer.php，在wp_footer()后面添加highslide的js脚本.

<?php if ( is_page() || is_single() ) : ?>
<script type="text/javascript" src="<?php bloginfo( 'template_url' ); ?>/js/highslide/highslide-with-gallery.packed.js" /></script>
<script type="text/javascript">
    hs.graphicsDir = "<?php bloginfo( 'template_url' ); ?>/css/graphics/";
    hs.showCredits = false;
    hs.align = 'center';
    hs.transitions = ['expand', 'crossfade'];
    hs.outlineType = 'glossy-dark';
    hs.wrapperClassName = 'dark';
    hs.fadeInOut = true;
    hs.dimmingOpacity = 0.75;
 
    // Add the controlbar
    if (hs.addSlideshow) {
        hs.addSlideshow({
            interval: 5000,
            repeat: false,
            useControls: true,
            fixedControls: 'fit',
            overlayOptions: {
                opacity: .6,
                position: 'bottom center',
                hideOnMouseOut: true
            }
        });
    }
</script>
<?php endif; ?>

5. 将NextGen Gallery的特效设置成Highslide，如图

全部完成，可以查看效果了