同位素 - 过滤图像 - 如何仅在灯箱（或 shadowbox JS）中显示可见（过滤）图像答案

【问题标题】：Isotope - filtered images - how to only show the visible (filtered) images in lightbox (or shadowbox JS)同位素 - 过滤图像 - 如何仅在灯箱（或 shadowbox JS）中显示可见（过滤）图像
【发布时间】：2011-08-17 09:28:17
【问题描述】：

我正在建立一个 wordpress 网站。我正在为图像布局和过滤实现同位素 (isotope.metafizzy)

我已经配置了 Isotope，这样图像就可以布局和过滤，这一切都很好。我正在使用 NextGen Gallery 的自定义模板来生成必要的图像缩略图和代码以供同位素拾取。

我想打开一个灯箱内的图像，以便可以查看更大的版本（可能在 wordpress 中使用 Lightbox2 - 但可能会使用 Shadowbox JS）

问题： 目前，当我在灯箱中打开图像时，它会加载系列中的所有图像，包括当前隐藏的图像（由同位素过滤）。

我想更改我的解决方案，以便仅将可见图像加载到灯箱中。这样，用户可以使用同位素过滤到所需的图像集，然后可以使用灯箱以更大的格式查看这些图像。

下面的代码是 wordpress 输出的内容（来自查看页面源）。请注意，wordpress Lightbox2 插件目前正在添加灯箱挂钩（我相信）。

我假设我需要以某种方式更改灯箱 - 但我绝对不知道我需要做什么。欢迎提出任何建议。

同位素似乎使用不透明度：0；隐藏图像 - 灯箱有办法识别吗？

<div id="isotopewrapper">
<div id="container">
<div class="inner">    
    <div id="post-71" class="page single">
        <h1 class="post-title super-heading">Isotope Portfolio</h1>
        <div id="options">
            <ul id="filters" class="option-set floated clearfix">
              <li><a href="#" data-filter="*" class="selected">show all</a></li>
              <li><a href="#" data-filter=".portrait">portrait</a></li>
              <li><a href="#" data-filter=".headshot">headshot</a></li>
              <li><a href="#" data-filter=".commercial">commercial</a></li>
              <li><a href="#" data-filter=".fashion">fashion</a></li>
              <li><a href="#" data-filter=".advertising">advertising</a></li>
            </ul>
        </div>  
        <div class="post-content">
<div id="isotopegallery" class="photos clearfix" id="ngg-gallery-1-71">
<!-- Thumbnails -->
<div class="photo portrait " style="width: 225px; height: 338px;">
    <a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6363.jpg"
        title=" " rel="lightbox[set_1]">
        <img title="mg_6363" alt="mg_6363" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6363.jpg" />
    </a>
</div>
<div class="photo headshot " style="width: 225px; height: 338px;">
    <a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6367.jpg"
        title=" " rel="lightbox[set_1]">
        <img title="mg_6367" alt="mg_6367" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6367.jpg" />
    </a>
</div>
<div class="photo portrait " style="width: 225px; height: 281px;">
    <a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6364.jpg"
        title=" " rel="lightbox[set_1]">
        <img title="mg_6364" alt="mg_6364" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6364.jpg" />
    </a>
</div>
<div class="photo headshot " style="width: 225px; height: 180px;">
    <a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6368.jpg"
        title=" " rel="lightbox[set_1]">
        <img title="mg_6368" alt="mg_6368" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6368.jpg" />
    </a>
</div>
<br style="clear: both" />
<div class="photo headshot " style="width: 225px; height: 180px;">
    <a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6370.jpg"
        title=" " rel="lightbox[set_1]">
        <img title="mg_6370" alt="mg_6370" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6370.jpg" />
    </a>
</div>
<div class="photo portrait " style="width: 225px; height: 180px;">
    <a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6372.jpg"
        title=" " rel="lightbox[set_1]">
        <img title="mg_6372" alt="mg_6372" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6372.jpg" />
    </a>
</div>
<div class="photo portrait " style="width: 225px; height: 338px;">
    <a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6378.jpg"
        title=" " rel="lightbox[set_1]">
        <img title="mg_6378" alt="mg_6378" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6378.jpg" />
    </a>
</div>
<div class="photo headshot " style="width: 225px; height: 338px;">
    <a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6394.jpg"
        title=" " rel="lightbox[set_1]">
        <img title="mg_6394" alt="mg_6394" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6394.jpg" />
    </a>
</div>
<br style="clear: both" />
<div class="photo fashion advertising " style="width: 225px; height: 338px;">
    <a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6400.jpg"
        title=" " rel="lightbox[set_1]">
        <img title="mg_6400" alt="mg_6400" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6400.jpg" />
    </a>
</div>
<div class="photo headshot " style="width: 225px; height: 180px;">
    <a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6404.jpg"
        title=" " rel="lightbox[set_1]">
        <img title="mg_6404" alt="mg_6404" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6404.jpg" />
    </a>
</div>
<div class="photo fashion " style="width: 225px; height: 281px;">
    <a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6406.jpg"
        title=" " rel="lightbox[set_1]">
        <img title="mg_6406" alt="mg_6406" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6406.jpg" />
    </a>
</div>
<div class="photo headshot fashion " style="width: 460px; height: 691px;">
    <a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6422.jpg"
        title=" " rel="lightbox[set_1]">
        <img title="mg_6422" alt="mg_6422" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6422.jpg" />
    </a>
</div>
<br style="clear: both" />
<div class="photo fashion " style="width: 225px; height: 150px;">
    <a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6421.jpg"
        title=" " rel="lightbox[set_1]">
        <img title="mg_6421" alt="mg_6421" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6421.jpg" />
    </a>
</div>
<div class="photo portrait " style="width: 225px; height: 338px;">
    <a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6393.jpg"
        title=" " rel="lightbox[set_1]">
        <img title="mg_6393" alt="mg_6393" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6393.jpg" />
    </a>
</div>
<div class="photo fashion " style="width: 225px; height: 180px;">
    <a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6425.jpg"
        title=" " rel="lightbox[set_1]">
        <img title="mg_6425" alt="mg_6425" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6425.jpg" />
    </a>
</div>
<div class="photo fashion advertising " style="width: 225px; height: 338px;">
    <a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6430.jpg"
        title=" " rel="lightbox[set_1]">
        <img title="mg_6430" alt="mg_6430" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6430.jpg" />
    </a>
</div>
<br style="clear: both" />
<div class="photo fashion commercial " style="width: 225px; height: 338px;">
    <a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6431.jpg"
        title=" " rel="lightbox[set_1]">
        <img title="mg_6431" alt="mg_6431" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6431.jpg" />
    </a>
</div>
<div class="photo advertising " style="width: 225px; height: 338px;">
    <a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6438.jpg"
        title=" " rel="lightbox[set_1]">
        <img title="mg_6438" alt="mg_6438" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6438.jpg" />
    </a>
</div>
<div class="photo headshot commercial " style="width: 225px; height: 150px;">
    <a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6445.jpg"
        title=" " rel="lightbox[set_1]">
        <img title="mg_6445" alt="mg_6445" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6445.jpg" />
    </a>
</div>
<div class="photo portrait " style="width: 225px; height: 281px;">
    <a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6453.jpg"
        title=" " rel="lightbox[set_1]">
        <img title="mg_6453" alt="mg_6453" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6453.jpg" />
    </a>
</div>
<br style="clear: both" />
<div class="photo advertising " style="width: 225px; height: 150px;">
    <a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6457.jpg"
        title=" " rel="lightbox[set_1]">
        <img title="mg_6457" alt="mg_6457" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6457.jpg" />
    </a>
</div>
<div class="photo headshot " style="width: 225px; height: 150px;">
    <a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6461.jpg"
        title=" " rel="lightbox[set_1]">
        <img title="mg_6461" alt="mg_6461" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6461.jpg" />
    </a>
</div>
<div class="photo portrait commercial " style="width: 225px; height: 338px;">
    <a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6463.jpg"
        title=" " rel="lightbox[set_1]">
        <img title="mg_6463" alt="mg_6463" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6463.jpg" />
    </a>
</div>
<div class="photo commercial portrait " style="width: 225px; height: 338px;">
    <a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6464.jpg"
        title=" " rel="lightbox[set_1]">
        <img title="mg_6464" alt="mg_6464" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6464.jpg" />
    </a>
</div>
<br style="clear: both" />
<div class="photo fashion portrait headshot " style="width: 225px; height: 180px;">
    <a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6491.jpg"
        title=" " rel="lightbox[set_1]">
        <img title="mg_6491" alt="mg_6491" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6491.jpg" />
    </a>
</div>
<div class="photo portrait headshot " style="width: 225px; height: 281px;">
    <a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6497.jpg"
        title=" " rel="lightbox[set_1]">
        <img title="mg_6497" alt="mg_6497" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6497.jpg" />
    </a>
</div>
<!-- Pagination -->
<div class="ngg-clear">
</div>
</div>


</div>
</div><!-- .post -->


    <div class="clear"></div>
</div><!-- .inner -->
</div><!-- #container -->
</div><!-- close isotopewrapper-->              

    <div id="footer">
        <div class="inner">
            <span class="icon"></span>
                                <div class="fr">
                    <a title="" href="http://localhost/imageworkshop"><img id="logosmall" src="http://localhost/imageworkshop/wp-content/uploads/2011/05/image-workshop-logo-temp_small_trans.png" alt="" /></a>
                    <p>Copyright © 2011 Image Workshop, All Rights Reserved</p>

                </div>

            <div class="column first"><div id="text-3" class="widget widget_text widget-1">         <div class="textwidget"><p>Custom text or widget stuff can go here.</p>
</div>
    </div>        
</div>                                                                

            <div class="clear"></div>
         </div>
    </div>

    <div id="underfooter">
        <div class="inner">

        </div>
    </div>


<script type="text/javascript">
    jQuery(document).ready(function($) {
                        Cufon.replace('h1, h2, h3, h4, h5, h6, .comment-index,    .comment-author, .comment-meta, .breadcrumb, .entry-title', {hover:true});  
Cufon.replace('#menu-wrapper a', {hover:true});

        $("a[rel^='prettyPhoto']").prettyPhoto({
            //slideshow: 3000,
            //autoplay_slideshow: true
            default_width: 940,
            default_height: 800,
            theme: 'light_square'
        });
    });
</script>





</body>

</html>

<script>

jQuery(document).ready(function($) {   

var $container = $('#isotopegallery');

// filter buttons
$('#filters a').click(function(){
  var selector = $(this).attr('data-filter');
  $container.isotope({ filter: selector });
  return false;
});


  // switches selected class on buttons
  $('#options').find('.option-set a').click(function(){
    var $this = $(this);

    // don't proceed if already selected
    if ( !$this.hasClass('selected') ) {
      $this.parents('.option-set').find('.selected').removeClass('selected');
      $this.addClass('selected');
    }

  });


$(function(){

  $container.isotope({
    itemSelector : '.photo',
    masonry : {
      columnWidth : 5
    }
  });

});

});
</script>

【问题讨论】：

标签： javascript wordpress filter lightbox shadowbox

【解决方案1】：

设法通过将以下代码添加到 ISOTOPE 的 Javascript 来解决此问题：这会在每次过滤后清除并重新加载缓存，这意味着只有显示的图像才会显示在 Shadowbox 中：

    // filter buttons
    $('#filters a').click(function(){
      var selector = $(this).attr('data-filter');
      $container.isotope({ filter: selector });

      // don't proceed if no Shadowbox yet
      if ( !Shadowbox ) {
        return false;
      }

      Shadowbox.clearCache();

      $container.data('isotope').$filteredAtoms.each(function(){
        Shadowbox.addCache( $(this).find('a[rel^="lightbox"]')[0] );
      });

      return false;
    });

【讨论】：