Streaming live at 10am (PST)

How to stagger image load on page load in isotope gallery?


#1

Does anyone know how to have an isotope gallery stagger its image loading upon first page load?

Ideally it would look something like this:

http://pexetothemes.com/demos/expression_wp/

I feel like it’s something to do with adding a “stagger” line into the code, but if that’s indeed how to do what I’d like to do, I just don’t have any idea where to actually put that piece of code.

Here’s what I’ve got so far:

http://kristinepaulsenphotography.webflow.io/editorial/editorial-photo-stories

And my custom code looks like this:

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js></script>

<script>
$(document).ready( function() {
  // init Isotope
  var $grid = $('.grid').isotope({
    filter: '.jamesleeburke',
    itemSelector: '.item',
    stagger: 90
  });

   // layout Isotope after each image loads
  $grid.imagesLoaded().progress( function() {
    $grid.isotope('layout');
  }); 

  // store filter for each group
  var filters = {};

  $('.filters').on( 'click', '.button', function() {
    var $this = $(this);
    // get group key
    var $buttonGroup = $this.parents('.button-group');
    var filterGroup = $buttonGroup.attr('data-filter-group');
    // set filter for group
    filters[ filterGroup ] = $this.attr('data-filter');
    // combine filters
    var filterValue = concatValues( filters );
    // set filter for Isotope
    $grid.isotope({ filter: filterValue });
   });

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

});

// flatten object by concatting values
 function concatValues( obj ) {
  var value = '';
  for ( var prop in obj ) {
    value += obj[ prop ];
  }
  return value;
 }
</script>

Or maybe this could be done without adding any more custom code? I’ve tried adding an interaction to the container class that holds each image, but I can’t figure out how to do a stagger effect by way of an interaction that applies to all the items. As it stands, when I set up the interaction on that container class, it just has them all load in at the same time - not staggered.

Thanks for any ideas you can provide!