Tag Archives: masonry

.imagesLoaded is not a function

Sh*ts,

I’m using mustache.js, masonry and I was trying to use imagesLoaded to avoid overlapping images.

My code was returning me .imagesLoaded is not a function…
Some people on the interwebs said that disabling Rocket Loader in CloudFlare… didn’t work for me.

After more than 2 hours I got the solution – without using imagesLoaded -.

    $(window).load(function() {

      // Masonry Trigger
      var $container = $('#masonry-wrap');

      $container.masonry({
         // options
         itemSelector: '.masonry-box', 
         columnWidth: 283 
      });

    });

 

Solution was taken from jQuery masonry with WordPress and imagesLoaded and given by McNab!

masonry – images stacked/overlapped on each other

Sh*ts, , ,

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.

I had to use imagesLoaded to solve my problem

jquery.imagesloaded
//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js

$('.gallery-masonry').imagesLoaded( function(){
 $('.gallery-masonry').masonry({
 itemSelector: '.item',
 isAnimated: true,
 isFitWidth: true
 });
 });