Isotope – gefilterte Bilder – wie man nur die sichtbaren (gefilterten) Bilder in Lightbox (oder Shadowbox JS) anzeigt

Ich erstelle eine WordPress-Website. Ich implementiere Isotope für Bildlayout und Filterung (isotop.metafizzy)

Ich habe Isotope bereits so konfiguriert, dass Bilder angeordnet und filterbar sind, das funktioniert alles gut. Ich verwende eine benutzerdefinierte Vorlage von NextGen Gallery, um die erforderlichen Bildminiaturen und den Code für die Aufnahme von Isotopen zu generieren.

Ich möchte die Bilder in einer Lightbox öffnen, damit die größeren Versionen angezeigt werden können (wahrscheinlich mit Lightbox2 in WordPress – aber vielleicht mit Shadowbox JS)

DIE ANGELEGENHEIT:
Wenn ich derzeit ein Bild in der Lightbox öffne, werden alle Bilder der Serie geladen, einschließlich der Bilder, die derzeit ausgeblendet sind (gefiltert nach Isotope).

Ich möchte meine Lösung so ändern, dass nur die sichtbaren Bilder in die Lightbox geladen werden. Auf diese Weise kann ein Benutzer Isotope verwenden, um die gewünschten Bilder herunterzufiltern und diese dann in einem größeren Format mithilfe der Lightbox anzuzeigen.

Der folgende Code wird von WordPress ausgegeben (von der Quelle der Ansichtsseite). Beachten Sie, dass das WordPress Lightbox2-Plugin derzeit die Lightbox-Hooks hinzufügt (glaube ich).

Ich gehe davon aus, dass ich die Lightbox irgendwie ändern muss – aber ich habe absolut keine Ahnung, was ich tun muss. Irgendwelche Vorschläge wären willkommen.

Isotop scheint Opazität zu verwenden: 0; um die Bilder auszublenden – gibt es eine Möglichkeit für Lightbox, dies zu erkennen?

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

Dieses Problem konnte durch Hinzufügen des folgenden Codes zum Javascript für ISOTOPE behoben werden: Dies löscht und lädt den Cache nach jedem Filter neu und bedeutet, dass nur die angezeigten Bilder in Shadowbox angezeigt werden:

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