Isotope and lightbox, how to only show the visible (filtered) images in lightbox

Question

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.

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

I have tried the solution in this post but i wasn't able to adapt to my code.

  <!DOCTYPE html>
  <html>
  <head>

    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css">

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>

  <body>

    <div id="filters" class="button-group">  
      <button class="button is-checked" data-filter="*">Afficher tout</button>

      <button class="button" data-filter=".faune">faune</button><button class="button" data-filter=".flore">flore</button><button class="button" data-filter=".paysage">paysage</button>

    </div>


    <div id="isotopegallery" class="grid">

      <div  class="element-item flore" >

        <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 ">
          <img src="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/realisation-piscine-décoration-paysagere-style-habitat-150x150.jpg" alt="">
        </a>

      </div>


      <div  class="element-item faune" >

        <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 ">
          <img src="http://www.gonthier-entreprise.com/wp-content/uploads/2016/07/totem-arbre-siege-gonthier-150x150.jpg" alt="">
        </a>

      </div>


      <div  class="element-item flore" >

        <a href="http://localhost/wordpress_onepage/wp-content/uploads/2016/08/piscine_CHU01-1024x789.jpg" data-lightbox="image-1" data-title="Portfolio elt 6 ">
          <img src="http://localhost/wordpress_onepage/wp-content/uploads/2016/08/piscine_CHU01-150x150.jpg" alt="">
        </a>

      </div>

      <div  class="element-item faune" >

        <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 ">
          <img src="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/decoration-minerale-paysagere-150x150.jpg" alt="">
        </a>

      </div>

      <div  class="element-item flore" >

        <a href="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/2-1.jpg" data-lightbox="image-1" data-title="Portfolio elt 4 ">
          <img src="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/2-1-150x150.jpg" alt="">
        </a>

      </div>

      <div  class="element-item paysage" >

        <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 ">
          <img src="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/realisation-escalier-en-pierre-savoie-150x150.jpg" alt="">
        </a>

      </div>

    </div> 
  </p>

</div>
</div>

<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<!-- framework gallery isotope -->
<script src="https://npmcdn.com/isotope-layout@3.0/dist/isotope.pkgd.min.js"></script>
<!-- framework gallery lightbox -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/js/lightbox.js"></script>
<!-- framework gallery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>


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

        </script>

Thanks for your help

score 2 · Answer 1 · edited Dec 14 '17 at 22:35

Using magnificPopup I add/remove classes used by magnificPopup (see delegate option) in isotope's arrangeComplete event.

Isotope element with image, the class=mag is used by magnificPopup

<div class="element-item">
    <a href="gallery-image" class="mag">
        <img src="gallery-thumb" />
    </a>
</div>

magnificPopup using a delegate

$grid.magnificPopup({
    type: 'image',
    delegate: 'a.mag',
    gallery: {
        enabled: true
    },
    zoom: {
        enabled: true,
        duration: 300,
        opener: function (e) {
            return e.find("img");
        }
    }
});

Add/remove magnificPopup delegate classes

$grid.on('arrangeComplete', function(event, filteredItems) {
    $(".element-item:hidden a").removeClass("mag");
    $(".element-item:visible a").addClass("mag");
});

score -1 · Answer 2 · answered Aug 22 '16 at 00:47

If you have a group of related images that you would like to combine into a set, use the same data-lightbox attribute value for all of the images.

For example:

<a href="images/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
<a href="images/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
<a href="images/image-4.jpg" data-lightbox="roadtrip">Image #4</a>

http://lokeshdhakar.com/projects/lightbox2/#getting-started

Isotope and lightbox, how to only show the visible (filtered) images in lightbox

2 Answers2