Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Isotope 2 with “BJ Lazy Load” Wordpress plugin: damned overlap

Please help me.

I use this fantastic "Isotope" in this way:

jQuery(function(){ jQuery('#container').imagesLoaded( function() { jQuery('#container').isotope({ itemSelector: '.item', layoutMode: 'masonry', stamp: '.stamp1' }); }); });

With "BJ Lazy Load" Wordpress plugin activate there is everywhere an overlap of div.

With the plugin deactivate I see everything fine.

How to fix this?

If in the settings section of the Wordpress plugin i put "Load in Head" rather than "Load in Footer" the problem is partially fixed. There is less overlap, but some are still there, especially after one or two scroll with the mouse.

User Gravatar

lexmealux

Posted Dec 27 2013 0:50 UTC

$50


  • isotope
    lazy-load
  • 2121 Views

3 Replies


Hello lexmealux,

You should set width and height attributes to the image tag:

<img src="http://placehold.it/120x150" width="120" height="150" alt="">

Or if the images are same sized, you can do this in the CSS:

.image { width: 120px; height: 150px; }

You can skip the imagesLoaded plugin, because with the lazy load it wont work at all.

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Dec 27 2013 0:59 UTC

You haven't included a URL to see exactly what is happening

so make sure the following:

  1. the image (the real ones) are in the same size that the lazy load puts in. an overlap can be caused since lazy load plugin replaces the images after isotope does its thing, and if not in the same size isotope won't rearrange

  2. you can try the following to force isotope to relayout when you scroll

jQuery(function(){ jQuery(window).on("scroll", function(){ jQuery('#container').isotope('reLayout'); }); });

User Gravatar

guyisra

Posted Dec 27 2013 1:03 UTC

Nothing to do. The problem is with img-responsive of Bootstrap 3. I'm using, i remember you, Isotope v2-4 Beta.

User Gravatar

lexmealux

Posted Dec 27 2013 10:33 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions