Isotope not triggering masonery on page load

Question

I'm trying to use Isotope based on code from a template I downloaded. The code appears fine, but my images are not "masoned" correctly on page load. They only seem left and right aligned.

If I click my filter all, the masonry triggers and the photos are aligned correctly.

My filters looks like this: All / filter 1 / filter 2 / filter 3

This is the JS code I'm using:

var $container = $('#project_container'), $filters = $("#filters a");

$container.imagesLoaded( function(){
    $container.isotope();
});

// filter items when filter link is clicked
$filters.click(function() {
    $filters.removeClass("active");
    $(this).addClass("active");
    var selector = $(this).data('filter');
    $container.isotope({ filter: selector });
    return false;
});

I've also tried:

$container.imagesLoaded( function(){
    $container.isotope({ filter: '*' });
    return false;
});

But that's not working either. If I replace * with .filter1, the page loads showing only images having filter1.

How can I trigger Isotope to align images according to the masonry method?

HTML on page load:

<div id="project_container" style="position: relative; overflow: hidden; height: 1223px;" class="isotope">

  <div class="photo industri isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);">
    <img alt="Vaskeriet" class="attachment-medium wp-post-image" src="(...)/vaskeriet1-570x633.jpg">
  </div>

  <div class="photo naeringsbygg isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate(570px, 0px);">
    <img alt="Otto Moe" class="attachment-medium wp-post-image" src="(...)/ottomoe1-570x272.jpg">
  </div>

  <div class="photo institusjoner isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate(1140px, 0px);">
    <img alt="Namsos sykehjem" class="attachment-medium wp-post-image" src="(...)/sykehjem2-570x733.jpg">
  </div>

  <div class="photo arealplanlegging isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate(570px, 381px);">
    <img alt="Kulturparken" class="attachment-medium wp-post-image" src="(...)/kultur1-570x733.jpg">
  </div>
</div>

After I click All, the following is changed:

div id="project_container" : height: 523px;
div class="naeringsbygg" : translate(295px, 0px)
div class="institusjoner" : translate(590px, 0px)
div class="arealplanlegging" : translate(295px, 146px)

So it seems that the container attribute top and the following divs translate has the wrong values when page is loaded and only gets the correct values when I click all.

So I'm wondering how I can assign the correct values on page load.

Any suggestions?

Can you include your html/css and possibly provide a demo in http://jsbin.com/ or similar? Having trouble recreating your issue — apaul, Jul 05 '13 at 16:16
@apaul34208, I've updated the code. Any suggestion greatly appreciated. — Steven, Jul 07 '13 at 12:29

score 1 · Answer 1 · edited Aug 08 '13 at 20:24

1

I had the same issue on Chrome (Mac), although it didn't happen in Firefox (Windows).

Use the $(window).load() solution found here.

So just wrap your initialisation in the top and bottom lines of this:

$(window).load(function(){
  $('#container').isotope({
    // options...
  });
});

edited Aug 08 '13 at 20:24

jonsca

9,342
26
53
60

answered Aug 08 '13 at 20:02

n81

13
2

score 0 · Answer 2 · answered Jul 07 '13 at 16:19

0

You just need to add .photos to your project_container like so:

<div id="project_container" class="isotope photos">

Working Example

answered Jul 07 '13 at 16:19

apaul

15,557
8
44
76

The class `isotope` seems to be added by the Isotope script in runtime. I did discover that this works if I put the JS script in the bottom of my template rather than in an external JS file. I'm not sure why. – Steven Jul 07 '13 at 17:37
@Steven try wrapping the js in a `$(document).ready(function () {});` jsfiddle does it automatically so it doesn't appear in the example – apaul Jul 07 '13 at 20:42

Isotope not triggering masonery on page load

2 Answers2