同位素 - 過濾圖像 - 如何只顯示燈箱（或shadowbox JS）中的可見（過濾）圖像

Question

我正在建立一個wordpress網站。我正在實施用於圖像佈局和過濾的同位素（isotope.metafizzy）

我已經配置了同位素，以便圖像鋪設和可過濾，這一切都工作正常。我正在使用NextGen Gallery的自定義模板來生成必要的圖像縮略圖和同位素代碼。

我想打開圖像的燈箱內部，使得較大的版本都可以看到（或許在WordPress使用Lightbox2 - 但也許會用太極拳JS）

問題： 目前，當我打開在lightbox中的圖像，它會加載系列中的所有圖像，包括當前隱藏的圖像（通過同位素過濾）。

我想更改我的解決方案，以便只有可見圖像纔會加載到燈箱中。這樣用戶可以使用同位素過濾到所需的一組圖像，然後可以使用燈箱以更大的格式查看這些圖像。

下面的代碼是wordpress輸出的內容（來自查看頁面的源代碼）。請注意，wordpress Lightbox2插件目前正在添加燈箱掛鉤（我相信）。

我假設我需要以某種方式改變燈箱 - 但我絕對不知道我需要做什麼。歡迎大家提出意見。

Isoptope似乎使用不透明度：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> 

Answer 1

管理通過添加以下代碼給Javascript用於同位素來解決這個問題： 這將清除並重新加載每個濾波器之後的高速緩衝存儲器的裝置，以及僅其中示出了顯示在太極拳圖像：

// 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; 
    });