CODEWITHSUNDEEP
jqueryjquery-isotope
Mark Boulder
Mark Boulder

Reputation: 14277

jQuery Isotope: Fluid setup like Beyonce's website only works after resizing window

Trying to do like Beyonce's website but using Isotope instead of Masonry.

Any idea why this won't work by default, but only after one resizes ones window?

http://jsfiddle.net/RJZu6/

var $container = $("ul");

$container.imagesLoaded(function() {
  $container.isotope({
    itemSelector: "li",
    animationEngine: "jquery",
    sortBy: "random",

    // http://isotope.metafizzy.co/demos/fluid-responsive.html

    resizable: false,
    masonry: { columnWidth: $container.width() / 3 }
  });
});

$(window).smartresize(function() {
  $container.isotope({
    masonry: { columnWidth: $container.width() / 3 }
  });
});

Upvotes: 1

Views: 1734

Answers (1)

Mark Boulder
Mark Boulder

Reputation: 14277

http://jsfiddle.net/RJZu6/1/

var $container = $("ul");

var size = function () {
    console.log('wee!');
    $container.isotope({
        masonry: {
            columnWidth: $container.width() / 3
        }
    });
}

$container.imagesLoaded(function () {
    $container.isotope({
        itemSelector: "li",
        animationEngine: "jquery",
        sortBy: "random",
        resizable: false,
        masonry: {
            columnWidth: $container.width() / 3
        }
    });

    size();
});

$(window).smartresize(size);
// $(size); // this is an issue, because the images haven't yet loaded!

Upvotes: 2

Related Questions