title: Isotope and lightbox, how to only show the visible (filtered) images in lightbox
body: <p>I am building a wordpress website. I am implementing isotope for image layout and filtering (isotope.metafizzy)</p>
  
  <p>I have configured Isotope already, so that images are layed out and filterable, this is all working fine.</p>
  
  <p>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).</p>
  
  <p>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.</p>
  
  <p>the code below is what is outputted by wordpress (from view page source). </p>
  
  <p>I have tried the solution in <a href="http://I%20tried%20to%20adapt%20the%20solution%20in%20this%20post,%20but%20it%20didn&#39;t%20work.%20[https://stackoverflow.com/questions/5864488/isotope-filtered-images-how-to-only-show-the-visible-filtered-images-in-li?newreg=52e346dfc1e445eabf1df141e641f88e][1]" rel="nofollow noreferrer">this post</a> but i wasn't able to adapt to my code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
  
      &lt;!--Import Google Icon Font--&gt;
      &lt;link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
  
      &lt;!-- Compiled and minified CSS --&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css"&gt;
  
      &lt;!--Let browser know website is optimized for mobile--&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
  
      &lt;div id="filters" class="button-group"&gt;  
        &lt;button class="button is-checked" data-filter="*"&gt;Afficher tout&lt;/button&gt;
  
        &lt;button class="button" data-filter=".faune"&gt;faune&lt;/button&gt;&lt;button class="button" data-filter=".flore"&gt;flore&lt;/button&gt;&lt;button class="button" data-filter=".paysage"&gt;paysage&lt;/button&gt;
  
      &lt;/div&gt;
  
  
      &lt;div id="isotopegallery" class="grid"&gt;
  
        &lt;div  class="element-item flore" &gt;
  
          &lt;a href="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/realisation-piscine-décoration-paysagere-style-habitat.jpg" data-lightbox="image-1" data-title="Portfolio elt 8 "&gt;
            &lt;img src="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/realisation-piscine-décoration-paysagere-style-habitat-150x150.jpg" alt=""&gt;
          &lt;/a&gt;
  
        &lt;/div&gt;
  
  
        &lt;div  class="element-item faune" &gt;
  
          &lt;a href="http://www.gonthier-entreprise.com/wp-content/uploads/2016/07/totem-arbre-siege-gonthier.jpg" data-lightbox="image-1" data-title="Portfolio elt 7 "&gt;
            &lt;img src="http://www.gonthier-entreprise.com/wp-content/uploads/2016/07/totem-arbre-siege-gonthier-150x150.jpg" alt=""&gt;
          &lt;/a&gt;
  
        &lt;/div&gt;
  
  
        &lt;div  class="element-item flore" &gt;
  
          &lt;a href="http://localhost/wordpress_onepage/wp-content/uploads/2016/08/piscine_CHU01-1024x789.jpg" data-lightbox="image-1" data-title="Portfolio elt 6 "&gt;
            &lt;img src="http://localhost/wordpress_onepage/wp-content/uploads/2016/08/piscine_CHU01-150x150.jpg" alt=""&gt;
          &lt;/a&gt;
  
        &lt;/div&gt;
  
        &lt;div  class="element-item faune" &gt;
  
          &lt;a href="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/decoration-minerale-paysagere.jpg" data-lightbox="image-1" data-title="Portfolio elt 5 "&gt;
            &lt;img src="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/decoration-minerale-paysagere-150x150.jpg" alt=""&gt;
          &lt;/a&gt;
  
        &lt;/div&gt;
  
        &lt;div  class="element-item flore" &gt;
  
          &lt;a href="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/2-1.jpg" data-lightbox="image-1" data-title="Portfolio elt 4 "&gt;
            &lt;img src="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/2-1-150x150.jpg" alt=""&gt;
          &lt;/a&gt;
  
        &lt;/div&gt;
  
        &lt;div  class="element-item paysage" &gt;
  
          &lt;a href="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/realisation-escalier-en-pierre-savoie.jpg" data-lightbox="image-1" data-title="Portfolio elt 3 "&gt;
            &lt;img src="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/realisation-escalier-en-pierre-savoie-150x150.jpg" alt=""&gt;
          &lt;/a&gt;
  
        &lt;/div&gt;
  
      &lt;/div&gt; 
    &lt;/p&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!--Import jQuery before materialize.js--&gt;
  &lt;script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Compiled and minified JavaScript --&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"&gt;&lt;/script&gt;
  &lt;!-- framework gallery isotope --&gt;
  &lt;script src="https://npmcdn.com/isotope-layout@3.0/dist/isotope.pkgd.min.js"&gt;&lt;/script&gt;
  &lt;!-- framework gallery lightbox --&gt;
  &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/js/lightbox.js"&gt;&lt;/script&gt;
  &lt;!-- framework gallery --&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"&gt;&lt;/script&gt;
  
  
  &lt;script&gt;
            // external js: isotope.pkgd.js
  
            // init Isotope
            var $grid = $('.grid').isotope({
              itemSelector: '.element-item',
              layoutMode: 'fitRows',
              getSortData: {
                name: '.name',
                symbol: '.symbol',
                number: '.number parseInt',
                category: '[data-category]',
                weight: function( itemElem ) {
                  var weight = $( itemElem ).find('.weight').text();
                  return parseFloat( weight.replace( /[\(\)]/g, '') );
                }
              }
            });
  
            // filter functions
            var filterFns = {
              // show if number is greater than 50
              numberGreaterThan50: function() {
                var number = $(this).find('.number').text();
                return parseInt( number, 10 ) &gt; 50;
              },
              // show if name ends with -ium
              ium: function() {
                var name = $(this).find('.name').text();
                return name.match( /ium$/ );
              }
            };
  
            // bind filter button click
            $('#filters').on( 'click', 'button', function() {
              var filterValue = $( this ).attr('data-filter');
              // use filterFn if matches value
              filterValue = filterFns[ filterValue ] || filterValue;
              $grid.isotope({ filter: filterValue });
            });
  
            // bind sort button click
            $('#sorts').on( 'click', 'button', function() {
              var sortByValue = $(this).attr('data-sort-by');
              $grid.isotope({ sortBy: sortByValue });
            });
  
            // change is-checked class on buttons
            $('.button-group').each( function( i, buttonGroup ) {
              var $buttonGroup = $( buttonGroup );
              $buttonGroup.on( 'click', 'button', function() {
                $buttonGroup.find('.is-checked').removeClass('is-checked');
                $( this ).addClass('is-checked');
              });
            });    
  
          &lt;/script&gt;   </code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks for your help</p>