CODEWITHSUNDEEP
jqueryjquery-isotope
Steven
Steven

Reputation: 19425

Isotope not triggering masonery on page load

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?

Upvotes: 0

Views: 2837

Answers (2)

n81
n81

Reputation: 13

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...
  });
});

Upvotes: 1

apaul
apaul

Reputation: 16170

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

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

Working Example

Upvotes: 0

Related Questions