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

Fix Isotope overlapping item

I need help me to fix overlapping item elements on a html page where I'm using jquery isotope. I tried to follow the suggestions founded in the appendix, but i can not found a solution in Chrome and Safari yet. My page is: demo web site It is possible also manage the width of the items responsive?

Thanks, marco.

User Gravatar

impulsi

Posted May 28 2014 10:27 UTC

$50


  • Assigned To Gaby
  • Solved
  • javascript
    jquery
    isotope
  • 9289 Views

9 Replies


You need to use imagesLoaded to prevent overlaps:

http://isotope.metafizzy.co/appendix.html#imagesloaded

User Gravatar

macsupport

Posted May 28 2014 12:09 UTC

Hi macsupport, thank you for your post. Impulsi have read the help section of Isotope but wasn't able to apply the instructions. He's looking for a complete code solution that he could copy to the HTML.

The problem is clearly visible with Safari and Chrome.

Thanks!

User Gravatar

CodersClan

Posted May 29 2014 3:50 UTC

I think you need to replace the first part of your docReady() function like so:

  var container = document.querySelector('#container');
  var iso;
  imagesLoaded( container, function() {
      iso = new Isotope( container, {
      layoutMode: 'fitRows',
      transitionDuration: '0.8s',
      getSortData: {
        number: '.number parseInt',
        symbol: '.symbol',
        name: '.name',
        category: '[data-category]',
        weight: function( itemElem ) {
          // remove parenthesis
          return parseFloat( getText( itemElem.querySelector('.weight') ).replace( /[()]/g, '') );
        }
      }
    })
  });
  window.iso = iso;
User Gravatar

Simes

Posted May 29 2014 4:08 UTC

Hey impulsi,

It seems that the overlap occurs because the isotope fires before all images have been loaded.

The best way to make sure that isotope will work after the images were loaded is to use the imagesLoaded plugin as noted above. In isotope v1 that was included with the js file, but in isotope v2 it is not included. You must include that file on your own to use it http://imagesloaded.desandro.com/

once done, you can do something like

docReady( function() {
  var container = document.querySelector('#container');
imagesLoaded(container, function(){
  var iso = window.iso = new Isotope( container, {
    layoutMode: 'fitRows',
    transitionDuration: '0.8s',
    getSortData: {
      number: '.number parseInt',
      symbol: '.symbol',
      name: '.name',
      category: '[data-category]',
      weight: function( itemElem ) {
        // remove parenthesis
        return parseFloat( getText( itemElem.querySelector('.weight') ).replace( /[()]/g, '') );
      }
    }
});
  });

that will make isotope fire once the images have been loaded in container

User Gravatar

guyisra

Posted May 29 2014 4:11 UTC

If you do not want to use imagesLoaded, here's a VanillaJS simple image pre-loader. The one i saw on your site will not ensure that all images have indeed been preloaded or not.

   var imageSet = ["images/projects/cristalli-edibili.gif","images/projects/Riutilizzare.jpg","images/projects/Gunnar.jpg","images/projects/movimento-ed-equilibrio.gif","images/projects/dot.jpg","images/projects/Unda.jpg","images/projects/lanciarazzi.gif","images/projects/Lambda.jpg","images/projects/lotOfDots.jpg","images/projects/Lambda.jpg","images/projects/cascata-di-pioggia.gif","images/projects/maniglie.jpg","images/projects/dada.jpg","images/projects/serigrafia.jpg","images/projects/picasso.jpg"]

var i = 0;
var img = [];

function preload_images(){
    if(i >= imageSet.length){
        // Fire Isotope here now that all images are loaded
    } else {
        img[i] = new Image();
        img[i].src = imageSet[i];
        img[i].onload = function(){
            i++;
            preload_images();
        }
    }
}

preload_images();

Simply put your isotope code where it says //Fire Isotope here now that all images are loaded. Or else you could put all the isotope code in a function and call the function here.

User Gravatar

sachinbhatnagar

Posted May 29 2014 4:18 UTC

There are a few possible solutions to your problem. Here are two:

Solution #1
The docReady() fires as soon as the DOM structure (i.a. the HTML) is available to the browser. At this point the images are not loaded yet. So this solutions defers the initialization of isotope to the point when the whole page (including the images) is loaded .

Solution #2
You could also tell the browser the dimensions of each image through the width and height attributes of each <img> tag. This way it knows immediately what space they will take up, and isotope can do its thing even before the images are loaded.

I would go with #2. All other solutions have the downside that the images will be "un-isotope'd" for a few moments before all images are loaded completely.

User Gravatar

philippbosch

Posted May 29 2014 4:26 UTC

The problem is not waiting for the images to load. Since you already use jquery you could initialize the isotope inside the load event instead of the ready.

Just replace docReady( ... ) with $(window).load( ... )


Another thing to note is that the skeleton CSS grid you use is made for 16 columns, but you have edited it to make it 18. You have not adjusted the widths correctly though. You will need to either change the container width to accomodate all 18 columns, or you will have to alter the width of each column so that when added they will fit the 960 of the container.

This does not affect the specific issue, but it can cause problems down the road..

User Gravatar

Gaby

Posted May 29 2014 4:50 UTC

Solution

This didn't solve your task? Get your own custom solution.

Hi! I've got it done, responsive and no overlapping

http://yifeikong.pancakeapps.com/codersclan/index.html

code: http://yifeikong.pancakeapps.com/codersclan/codersclan.zip

User Gravatar

yifeikong

Posted May 29 2014 5:21 UTC

Give this man a cookie for his awesome answer ^_^

User Gravatar

user9894

Posted Oct 20 2015 20:42 UTC

Add a reply

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