Masonry imagesReveal with CSS width

Asked Jul 19 '14 at 08:55

Active Jul 19 '14 at 13:32

Viewed 104 times

I'm trying to use Masonryjs with imagesReveal "plugin" and with the width of the elements based on CSS (I need it because my items are sized with media queries).

This is my code:

$( function() {

  var $container = $('#container').masonry({
    itemSelector: '.item',
    columnWidth: '.item'
  });

    var $items = $("#items .item");
    $container.masonryImagesReveal( $items );

});

$.fn.masonryImagesReveal = function( $items ) {
  var msnry = this.data('masonry');
  var itemSelector = msnry.options.itemSelector;
  // hide by default
  $items.hide();
  // append to container
  this.append( $items );
  $items.imagesLoaded().progress( function( imgLoad, image ) {
    // get item
    // image is imagesLoaded class, not <img>, <img> is image.img
    var $item = $( image.img ).parents( itemSelector );
    // un-hide item
    $item.show();
    // masonry does its thing
    msnry.appended( $item );
  });

  return this;
};

Pen here:
http://codepen.io/FezVrasta/pen/yEilq

As you can see (check image) the items are not correctly placed, what am I doing wrong?

enter image description here

edited Jul 19 '14 at 13:32

asked Jul 19 '14 at 08:55

Fez Vrasta

14,110
21
98
160

It seems to be laid out correctly to me. Can you please explain the behavior you're seeing and the desired behavior? – Zach Saucier Jul 19 '14 at 13:29
I've added a screenshot (Chrome 38.0.2096.0 dev-m) – Fez Vrasta Jul 19 '14 at 13:32
The way it behaves for me is that the first one fades in, there is a long break, then the rest come in. Is it the same for you? – Zach Saucier Jul 19 '14 at 14:52
no it does not show anything else after the first image... I've waited about 2 minutes. – Fez Vrasta Jul 19 '14 at 16:42

Masonry imagesReveal with CSS width

0 Answers0