Implement imagesLoaded script

  • Resolved throwingmarbles

    (@throwingmarbles)


    12 years ago

    Hi,
    Another question about this theme. I have altered it so that images don’t always have the same height. This occasionally causes Isotope blocks to overlap, if they get their position before the images are loaded. I use Infinite Scroll to load them (and unfortunately had to disable the filter for the time being since the two don’t combine very well)

    I’ve tried figuring out where to call the imagesLoaded function that is already integrated in jquery.isotope.min.js, but I haven’t been able to make it work…

    Any pointers would be greatly appreciated.

    Kind Regards,
    Marloes Hautmann

Viewing 1 replies (of 1 total)
  • Thread Starter throwingmarbles

    (@throwingmarbles)

    This always happens, I mess around for days and nights without luck, finally pop the question online, try once more out of pure frustration and finally get it to work…

    I had to add the imagesLoaded call to your script as well as the Infinite Scroll one. In case anyone else searches, I edited this part in scripts.js:

    jQuery(function(){
var $container = jQuery('#post-listing');
$container.imagesLoaded( function(){
	$container.isotope({
		 itemSelector: '.item',
		// resizable: false,
		 masonry : {
	        cornerStampSelector: '.corner-stamp',
			//columnWidth: 240
			columnWidth: $container.width() / 4

	      }
	});
});
Viewing 1 replies (of 1 total)
  • The topic ‘Implement imagesLoaded script’ is closed to new replies.