CODEWITHSUNDEEP
javascriptphpjquerywordpressjquery-isotope
JoSch
JoSch

Reputation: 990

Isotope Plugin: How to use the imagesLoaded option?

I'm using the Isotope plugin for the grid of a Wordpress page. I would like to use Isotope's imagesLoaded option in order to avoid the images on the page overlapping when the page is loaded. Can someone explain to me where and how in my existing code I have to use imagesLoaded?

jQuery(function ($) {

    var $container = $('#isotope-list');        
    $container.isotope({                        
        itemSelector : '.item', 
        layoutMode : 'masonry',
        percentPosition: true
    });


    //Add the class selected to the item that is clicked, and remove from the others
    var $optionSets = $('#filters'),
    $optionLinks = $optionSets.find('a');

    $optionLinks.click(function(){
    var $this = $(this);
    // don't proceed if already selected
    if ( $this.hasClass('selected') ) {
      return false;
    }
    var $optionSet = $this.parents('#filters');
    $optionSets.find('.selected').removeClass('selected');
    $this.addClass('selected');

    //When an item is clicked, sort the items.
     var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });

    return false;
    });

});

UPDATE:

I tried adding imagesLoaded but it causes the Isotope plugin to stop working entirely. Here's the code with imagesLoaded added:

jQuery(function ($) {

    var $container = $('#isotope-list').imagesLoaded( function() {
      $container.isotope({
            itemSelector : '.item', 
            layoutMode : 'masonry',
            percentPosition: true
      });
    });

    //Add the class selected to the item that is clicked, and remove from the others
    var $optionSets = $('#filters'),
    $optionLinks = $optionSets.find('a');

    $optionLinks.click(function(){
    var $this = $(this);
    // don't proceed if already selected
    if ( $this.hasClass('selected') ) {
      return false;
    }
    var $optionSet = $this.parents('#filters');
    $optionSets.find('.selected').removeClass('selected');
    $this.addClass('selected');

    //When an item is clicked, sort the items.
     var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });

    return false;
    });

});

I am linking to the imagesLoaded script in the header of the page but I am getting the following error when inspecting the page in Chrome:

Error

Upvotes: 0

Views: 1622

Answers (2)

Macsupport
Macsupport

Reputation: 5444

Without a Link to see the rest of your code I am making an educated guess based on your console log error. The console shows that "imagesLoaded is not a function" indicating that the imagesLoaded.js file is either not loaded as a script or loaded incorrectly. Early versions of isotope contained imagesLoaded but the current version does not (v3), so one needs to load it separately. Make sure that imagesLoaded.js and isotope.js are loaded after jQuery.

Upvotes: 0

FluffyKitten
FluffyKitten

Reputation: 14312

You can postpone initialising Isotope until all of your images have loaded by doing it in the callback function, e.g.:

var $container = $('#isotope-list').imagesLoaded( function() {
  $container.isotope({
        itemSelector : '.item', 
        layoutMode : 'masonry',
        percentPosition: true
  });
});

Or you can initialize Isotope, and then trigger layout after the images load.

// initialise Isotope
var $container = $('#isotope-list');        
$container.isotope({                        
    itemSelector : '.item', 
    layoutMode : 'masonry',
    percentPosition: true
});

// layout Isotope again after all images have loaded
$container.imagesLoaded().progress( function() {
   $container.isotope('layout');
});

Ref: https://isotope.metafizzy.co/faq.html

Upvotes: 2

Related Questions