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

Isotope does not respond work correctly

The isotope from http://isotope.metafizzy.co/ does not appear to consistently calculate heights correctly on my responsive portfolio website : http://teresalight.com

It fixes itself after a page reload, and is most prevalent in the chrome browser. Sometimes the second page is off then.

I probably needs image height/width but it is a responsive site so that would be time consuming to figure it out in percentages. It probably should also have a preloader as the whole site is slow.

Would you please help me get this page ( http://teresalight.com/projects/ )to work correctly all the time in all browsers on both of the pages? Thank you.

Teresa

User Gravatar

tmlight

Posted Jan 25 2014 15:58 UTC

$50


  • Assigned To guyisra
  • Solved
  • isotope
  • 4000 Views

5 Replies


Hey

The easiest way to solve this is to use the imagesLoaded plugin which is included in the isotope plugin

in the jquery.isotope.min.js at the end of the file, see if you can change the code to look like this

instead of :

var $container = $('#isotope-container');

$container.isotope({
  // options
  itemSelector : '.project',
  layoutMode : 'fitRows'
});

make it look like:

  var $container = $('#isotope-container');

    $container.imagesLoaded(function(){
        $container.isotope({
          // options
          itemSelector : '.project',
          layoutMode : 'fitRows'
        });
    });

or as an alternative you could wrap it all in $(window).load, like this

$(window).load(function(){
    var $container = $('#isotope-container');

    $container.isotope({
      // options
      itemSelector : '.project',
      layoutMode : 'fitRows'
    });

    // filter items when filter link is clicked
    $('#filters a').click(function(){
      var selector = $(this).attr('data-filter');
      $container.isotope({ filter: selector });
      return false;
    });

});

the reason the problem occurs is that the isotope plugin starts to work before the browser loads the images. The solution would be to either have the size of the images predetermined for the isotope to know how to fit them, or the make isotope start only after the images have been loaded. Since your website is responsive, I am not sure it would be best in your case to pre-set the images size, since in some situations it may not work.

Let me know if it worked or not

Guy

User Gravatar

guyisra

Posted Jan 25 2014 20:57 UTC

Solution

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

The first suggestion works! Yay!

With the second one, the filter no longer worked.

Thank you!

Teresa

User Gravatar

tmlight

Posted Jan 27 2014 5:51 UTC

Ah yes, sorry I had a typo in the second alternative as it should be

$(window).load(function(){
    var $container = $('#isotope-container');

    $container.isotope({
      // options
      itemSelector : '.project',
      layoutMode : 'fitRows'
    });
});
    // filter items when filter link is clicked
    $('#filters a').click(function(){
      var selector = $(this).attr('data-filter');
      $container.isotope({ filter: selector });
      return false;
    });

so the click event is outside of the $(window).load

I'm glad that it worked and you are happy :)

cheers

User Gravatar

guyisra

Posted Jan 27 2014 5:53 UTC

Which one would you use if it was your site? Should I retry the second one?

This is the site with the first one incorporated: http://teresalight.com .

Thank you! Teresa

User Gravatar

tmlight

Posted Jan 27 2014 6:28 UTC

Personally I use the imagesLoaded (which is a great plug-in for doing stuff after images are loaded) as it works best in some situations. Also I am able to put it all under $(document).ready

Another nice usage that I do with it is make each isotope image appear independently for a nice UI touch (other than showing everything at once)

User Gravatar

guyisra

Posted Jan 27 2014 9:58 UTC

Add a reply

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