0

I´m using Masonry and WordPress to make a little project to rate images...

The problem that I have is with Mansonry, the images overlap between other images.

http://postimg.org/image/kmvnzi7sh/

Here is the solution but I don´t understand how to fix it. --> http://masonry.desandro.com/#imagesloaded

In the header I have this:

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"> </script>

and in the footer I have this:

        <script type="text/javascript">
var container = document.querySelector('.span12');
var msnry = new Masonry( container, {
  // options
  itemSelector: '.item-grid'
});
</script>

I don´t know exactly what to do with this: masonry.desandro.com/appendix.html#imagesloaded

BTW: I know that there are several plugins for WP to make the same effect that I want, but I prefer not use plugins..

I hope someone can help me to fix this!

Thank you!

andresgl
  • 117
  • 9

1 Answers1

1

You just need to include the imagesLoaded script and initialize Masonry in the imagesLoaded callback, like this:

var container = document.querySelector('.span12'),
    msnry;

imagesLoaded( container, function() {
    msnry = new Masonry( container, {
      // options
      itemSelector: '.item-grid'
    });
});
Vlad Cazacu
  • 1,520
  • 12
  • 12
  • Thank you for your replay Vlad Cazacu, I tried but doesn´t work. Screenshot 1 --> http://postimg.org/image/mwf1s6ycl/ screenshot 2 --> http://postimg.org/image/79nsetkkl/ the effect of Masoonry doesn´t work (placing elements in optimal position based on available vertical space) THANK YOU!! – andresgl Aug 04 '14 at 14:20