css - Isotope NextGen Gallery 模板缩略图截断和重叠

Question

我已经为客户的 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; ?>

Answer 1

$.noConflict();
jQuery( window ).load(function( $ ) {

它不是在加载时工作，而是在调整大小或刷新时工作，对吗？在调用 isotope.min.js 之前加载 CSS 可能会有所帮助，为什么不把初始化也放在那里。

<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>
     ...

这些过滤器并不精确地反射(reflect)类。你有一个类“cirque-3”，但你的过滤器只有 .cirque 等等。所有(如果不是大多数)都不匹配。