Изотоп - отфильтрованные изображения - как отображать только видимые (отфильтрованные) изображения в лайтбоксе (или shadowbox JS)

Question

Я создаю сайт WordPress.Я реализую изотоп для компоновки и фильтрации изображений ( isotope.metafizzy )

Я уже настроил изотоп, так что изображения размещаются и фильтруются, все это работает нормально.Я использую пользовательский шаблон галереи NextGen для создания необходимых миниатюр изображений и кода для извлечения изотопа.

Я хочу открыть изображения внутри лайтбокса, чтобы можно было просматривать более крупные версии (возможно, с помощью Lightbox2в WordPress - но, возможно, будет использовать 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>

Answer 1

Удалось решить эту проблему, добавив следующий код в Javascript для ISOTOPE: это очищает и перезагружает кэш после каждого фильтра и означает, что только отображаемые изображения отображаются в 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;
    });