同位素 - 过滤的图像 - 如何只显示灯箱中的可见（过滤）图像（或shadowbox JS） [英] Isotope - filtered images - how to only show the visible (filtered) images in lightbox (or shadowbox JS)

问题描述

我正在建立一个WordPress的网站。我正在实施同位素图像布局和过滤（ isotope.metafizzy ）

我已经配置了同位素，所以图像被铺设和过滤，这一切都工作正常。我正在使用NextGen Gallery的自定义模板来生成必要的图像缩略图和同位素代码。

我想打开lightbox中的图像，更大的版本可以被看到（可能在wordpress中使用Lightbox2 - 但也许会使用Shadowbox JS）。


目前，当我在Lightbox中打开一个图像时，它会加载系列中的所有图像，包括当前隐藏的图像（通过同位素过滤）。

我想改变我的解决方案，只有可见的图像将被加载到灯箱。这样用户可以使用同位素过滤到所需的一组图像，然后可以使用lightbox以更大的格式查看这些图像。

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

我假设我将需要以某种方式更改灯箱 - 但我absolutley没有想法我需要做什么。欢迎任何建议。

Isoptope似乎使用不透明度：0;隐藏图像 - 有没有一种方法让灯箱识别这个？

 < div id =isotopewrapper> 
< div id =container> 
< div class =inner> 
< div id =post-71class =page single> 
 
< div id =options> 
< ul id =filtersclass =option-set floated clearfix> 
< li>< a href =＃data-filter =*class =selected>显示全部< / 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>时尚< / a>< / li> 
< li>< a href =＃data-filter =。advertising>广告< / a>< / li> 
< / ul> 
< / div> 
< div class =post-content> 
< div id =isotopegalleryclass =photos clearfixid =ngg-gallery-1-71> 
<！ - 缩图 - > 
< div class =photo portraitstyle =width：225px; height：338px;> 
  title = =lightbox [set_1]> 
< img title =mg_6363alt =mg_6363src =http：//localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6363.jpg/> 
< / a> 
< / div> 
< div class =photo headshotstyle =width：225px; height：338px;> 
  title = =lightbox [set_1]> 
< img title =mg_6367alt =mg_6367src =http：//localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6367.j​​pg/> 
< / a> 
< / div> 
< div class =photo portraitstyle =width：225px; height：281px;> 
  title = =lightbox [set_1]> 
< img title =mg_6364alt =mg_6364src =http：//localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6364.jpg/> 
< / a> 
< / div> 
< div class =photo headshotstyle =width：225px; height：180px;> 
  title = =lightbox [set_1]> 
< img title =mg_6368alt =mg_6368src =http：//localhost/imageworkshop/wp-content/gallery/portfolio/threading/thumbs_mg_6368.jpg/> 
< / a> 
< / div> 
< br style =clear：both/> 
< div class =photo headshotstyle =width：225px; height：180px;> 
  title = =lightbox [set_1]> 
< img title =mg_6370alt =mg_6370src =http：//localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6370.jpg/> 
< / a> 
< / div> 
< div class =photo portraitstyle =width：225px; height：180px;> 
< a href =http：//localhost/imageworkshop/wp-content/gallery/portfolio/mg_6372.jpg
 title = =lightbox [set_1]> 
< img title =mg_6372alt =mg_6372src =http：//localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6372.jpg/> 
< / a> 
< / div> 
< div class =photo portraitstyle =width：225px; height：338px;> 
  title = =lightbox [set_1]> 
< img title =mg_6378alt =mg_6378src =http：//localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6378.jpg/> 
< / a> 
< / div> 
< div class =photo headshotstyle =width：225px; height：338px;> 
< a href =http：//localhost/imageworkshop/wp-content/gallery/portfolio/mg_6394.jpg
 title = =lightbox [set_1]> 
< img title =mg_6394alt =mg_6394src =http：//localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6394.jpg/> 
< / a> 
< / div> 
< br style =clear：both/> 
< div class =photo fashion advertisingstyle =width：225px; height：338px;> 
  title = =lightbox [set_1]> 
< img title =mg_6400alt =mg_6400src =http：//localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6400.jpg/> 
< / a> 
< / div> 
< div class =photo headshotstyle =width：225px; height：180px;> 
< a href =http：//localhost/imageworkshop/wp-content/gallery/portfolio/mg_6404.jpg
 title = =lightbox [set_1]> 
< img title =mg_6404alt =mg_6404src =http：//localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6404.jpg/> 
< / a> 
< / div> 
< div class =photo fashionstyle =width：225px; height：281px;> 
  title = =lightbox [set_1]> 
< img title =mg_6406alt =mg_6406src =http：//localhost/imageworkshop/wp-content/gallery/portfolio/threading/thumbs_mg_6406.jpg/> 
< / a> 
< / div> 
< div class =photo headshot fashionstyle =width：460px; height：691px;> 
  title = =lightbox [set_1]> 
< img title =mg_6422alt =mg_6422src =http：//localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6422.jpg/> 
< / a> 
< / div> 
< br style =clear：both/> 
< div class =photo fashionstyle =width：225px; height：150px;> 
< a href =http：//localhost/imageworkshop/wp-content/gallery/portfolio/mg_6421.jpg
 title = =lightbox [set_1]> 
< img title =mg_6421alt =mg_6421src =http：//localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6421.jpg/> 
< / a> 
< / div> 
< div class =photo portraitstyle =width：225px; height：338px;> 
  title = =lightbox [set_1]> 
 < / a> 
< / div> 
< div class =photo fashionstyle =width：225px; height：180px;> 
< a href =http：//localhost/imageworkshop/wp-content/gallery/portfolio/mg_6425.jpg
 title = =lightbox [set_1]> 
< img title =mg_6425alt =mg_6425src =http：//localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6425.jpg/> 
< / a> 
< / div> 
< div class =photo fashion advertisingstyle =width：225px; height：338px;> 
  title = =lightbox [set_1]> 
< img title =mg_6430alt =mg_6430src =http：//localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6430.jpg/> 
< / a> 
< / div> 
< br style =clear：both/> 
< div class =photo fashion commercialstyle =width：225px; height：338px;> 
< a href =http：//localhost/imageworkshop/wp-content/gallery/portfolio/mg_6431.jpg
 title = =lightbox [set_1]> 
< img title =mg_6431alt =mg_6431src =http：//localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6431.jpg/> 
< / a> 
< / div> 
< div class =photo advertisingstyle =width：225px; height：338px;> 
  title = =lightbox [set_1]> 
< img title =mg_6438alt =mg_6438src =http：//localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6438.jpg/> 
< / a> 
< / div> 
< div class =photo headshot commercialstyle =width：225px; height：150px;> 
  title = =lightbox [set_1]> 
< img title =mg_6445alt =mg_6445src =http：//localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6445.jpg/> 
< / a> 
< / div> 
< div class =photo portraitstyle =width：225px; height：281px;> 
  title = =lightbox [set_1]> 
< img title =mg_6453alt =mg_6453src =http：//localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6453.jpg/> 
< / a> 
< / div> 
< br style =clear：both/> 
< div class =photo advertisingstyle =width：225px; height：150px;> 
  title = =lightbox [set_1]> 
< img title =mg_6457alt =mg_6457src =http：//localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6457.jpg/> 
< / a> 
< / div> 
< div class =photo headshotstyle =width：225px; height：150px;> 
< a href =http：//localhost/imageworkshop/wp-content/gallery/portfolio/mg_6461.jpg
 title = =lightbox [set_1]> 
< img title =mg_6461alt =mg_6461src =http：//localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6461.jpg/> 
< / a> 
< / div> 
< div class =photo portrait commercialstyle =width：225px; height：338px;> 
  title = =lightbox [set_1]> 
< img title =mg_6463alt =mg_6463src =http：//localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6463.jpg/> 
< / a> 
< / div> 
< div class =photo commercial portraitstyle =width：225px; height：338px;> 
  title = =lightbox [set_1]> 
< img title =mg_6464alt =mg_6464src =http：//localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6464.jpg/> 
< / a> 
< / div> 
< br style =clear：both/> 
< div class =photo fashion portrait headshotstyle =width：225px; height：180px;> 
  title = =lightbox [set_1]> 
< img title =mg_6491alt =mg_6491src =http：//localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6491.jpg/> 
< / a> 
< / div> 
< div class =photo portrait headshotstyle =width：225px; height：281px;> 
  title = =lightbox [set_1]> 
< img title =mg_6497alt =mg_6497src =http：//localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6497.jpg/> 
< / a> 
< / div> 
 <！ - 分页 - > 
< 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 =logosmallsrc =http：// localhost / imageworkshop / wp-content / uploads / 2011 /05/image-workshop-logo-temp_small_trans.pngalt =/>< / a> 
< p>版权所有©2011 Image Workshop，保留所有权利< / p> 
 
< / div> 
 
< div class =column first>< div id =text-3class =widget widget_text widget-1> < div class =textwidget>< p>自定义文字或小工具的东西可以在这里。< / 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（{
 //幻灯片：3000，
 // autoplay_slideshow：true 
 default_width：940，
 default_height： 800，
主题：'light_square'
}）; 
}）; 
< / script> 
 
 
 
 
 
< / body> 
 
< / html> 
 
< script> 
 
 jQuery（document）.ready（function（$）{
 
 var $ container = $（'＃isotopegallery'）; 
 
 //过滤按钮
 $（'＃filters a'）。click（function（）{
 var selector = $（this）.attr（'data-filter'）; 
 $ container.isotope （{filter：selector}）; 
 return false; 
}）; 
 
 
 //在按钮上切换选定的类
 $（'＃options '）.find（'。option-set a'）。click（function（）{
 var $ this = $（this）; 
 
 //如果已经选择
 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：
这将在每个过滤器后清除并重新加载缓存，并且意味着只有显示的图像显示在Shadowbox中：

  // filter button 
 $（'＃filters a'）。click（function（）{
 var selector = $（this）.attr（'data-filter'） ; 
 $ container.isotope（{filter：selector}）; 
 
 //如果没有Shadowbox，则不要继续
 if（！Shadowbox）{
 return （）; 
 
 
 $ b Shadowbox.addCache（$（this）.find（'a [rel ^ =lightbox]'）[0]）; 
}）; 
 
 return false; 
}）; 
  

I am building a wordpress website. I am implementing isotope for image layout and filtering (isotope.metafizzy)

I have configured Isotope already, so that images are layed out and filterable, this is all working fine. I am using a custom template of NextGen Gallery to generate the necessary image thumbnails and code for isotope to pick up.

I want to open the images inside a lightbox so that the larger versions can be viewed (probably using Lightbox2 in wordpress - but maybe will use Shadowbox JS)

THE ISSUE: Currently, when i open an image in the lightbox, it loads all the images in the series, including images which are currently hidden (filtered by Isotope).

I want to change my solution so that only the visible images will be loaded into the Lightbox. This way a user can use isotope to filter down to the desired set of images, and can then view these in a larger format using the lightbox.

the code below is what is outputted by wordpress (from view page source). Note that the wordpress Lightbox2 plugin is currently adding the lightbox hooks (i believe).

I am assuming that I will need to change the lightbox somehow - but I have absolutley no idea what i need to do. Any suggestions would be welcome.

Isoptope appears to use opacity: 0; to hide the images - is there a way for lightbox to recognise this?

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

解决方案

Managed to fix this issue by adding the following code to the Javascript for ISOTOPE: This clears and reloads the cache after each filter, and means that only the images which are shown are displayed in 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;
    });

这篇关于同位素 - 过滤的图像 - 如何只显示灯箱中的可见（过滤）图像（或shadowbox JS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！