我已经为客户的 WP 站点实现了 NextGen 自定义模板（可在此处找到：https ://github.com/cevenson/isotope-nextgen-gallery-template ），但我的缩略图似乎在 [大部分] 页面的初始加载（见下面的截图）。
此外，标签过滤实际上并不适用于所有“类别”。它们在过滤菜单中的编码都是相同的，所以我不确定那些不起作用的可能有什么问题。
我正在使用的网站是：http ://rajbhavsar.com/photos
有人用这个吗？任何想法将不胜感激。谢谢！
编辑：
我使用的模板代码如下。没有什么不寻常或有问题的。因此，为什么我在这里发帖。
<?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'] ?>
**/
?>
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.isotope.min.js" type="text/javascript"></script>
<style type="text/css">
/**** centre nav and put at bottom ****/
.ngg-navigation{
position: relative;
width: 80%;
margin: 0 auto;
}
#isotopegallery{
clear: both;
margin: 0 0 30px 0;
}
/**** Isotope Filtering ****/
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope, .isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: top, left, opacity;
transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}
.photo{
float:left;
margin:0 10px 10px 0;
}
#filters{
margin-left:0;
border: none;
}
#filters li{
display: block;
float:left;
list-style-type: none;
margin: 0 0 20px 0;
}
#filters li a{
background: #242424;
padding:8px;
margin:5px 6px 5px 0;
color:#878787;
text-decoration: none;
text-transform:uppercase;
font-weight:normal;
}
#filters li a:hover{
background: #595959;
}
</style>
<script>
jQuery(function($){
var $container = $('#isotopegallery');
$container.isotope({
itemSelector: '.photo'
});
$('#filters a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
});
</script>
<ul id="filters" class="clearfix">
<li><a href="#" data-filter="*">Show All</a></li>
<li><a href="#" data-filter=".acting">Acting</a></li>
<li><a href="#" data-filter=".cirque">Cirque</a></li>
<li><a href="#" data-filter=".film">Film</a></li>
<li><a href="#" data-filter=".gymnastics">Gymnastics</a></li>
<li><a href="#" data-filter=".live-events">Live Events</a></li>
<li><a href="#" data-filter=".people">people</a></li>
<li><a href="#" data-filter=".portrait">Portrait</a></li>
<li><a href="#" data-filter=".quotes">Quotes</a></li>
<li><a href="#" data-filter=".speaking">Speaking</a></li>
<li><a href="#" data-filter=".television">Television</a></li>
<li><a href="#" data-filter=".travel">Travel</a></li>
<li><a href="#" data-filter=".uncategorized">Uncategorized</a></li>
<li><a href="#" data-filter=".usa-yoga">USA Yoga</a></li>
</ul>
<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty ($gallery)) : ?>
<div id="isotopegallery" class="photos clearfix" id="<?php echo $gallery->anchor ?>">
<?php
//Used to break down and extract the width and height of each image
function get_string_between($string, $start, $end){
$string = " ".$string;
$ini = strpos($string,$start);
if ($ini == 0) return "";
$ini += strlen($start);
$len = strpos($string,$end,$ini) - $ini;
return substr($string,$ini,$len);
}
?>
<!-- Thumbnails -->
<?php foreach ( $images as $image ) : ?>
<?php if ( !$image->hidden ) {
//GET the Size parameters for each image. this i used to size the div box that the images go inside of.
$the_size_string = $image->size;
$thewidth = get_string_between($the_size_string, "width=\"", "\"");
$theheight = get_string_between($the_size_string, "height=\"", "\"");
$divstyle = 'width:'.$thewidth.'px; height:'.$theheight.'px;';
}?>
<?php
//Get the TAGS for this image
$tags = wp_get_object_terms($image->pid,'ngg_tag');
$tag_string = ''; //store the list of strings to be put into the class menu for isotpe filtering
?>
<?php foreach ( $tags as $tag ) : ?>
<?php $tag_string = $tag_string.$tag->slug.' '; //alternativley can use $tag->name;, slug with put hyphen between words ?>
<?php endforeach; ?>
<div class="photo <?php echo $tag_string ?>" style="<?php echo $divstyle; ?>">
<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 } ?>
</a>
</div>
<?php if ( $image->hidden ) continue; ?>
<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
<br style="clear: both" />
<?php } ?>
<?php endforeach; ?>
</div>
<!-- Pagination -->
<?php echo $pagination ?>
<?php endif; ?>