Masonry Image gallery not working, inline Javascript not taking any effect

Question

I just included Masonry Lib into my wordpress site to display an image gallery: http://letpack.lukasoppler.ch/geschuetzte-arbeitsplaetze/gebaeudeunterhalt/

I am calling masonry throug html markup in the div-Element, it is looking like this:

<div class="grid" data-masonry="{ " itemSelector" ".grid-item" }">
    <div class="grid-item">
        <img src="image-url" width="700" height="470">
    </div>
    <div class="grid-item">
        <img src="image-url" width="700" height="470">
    </div>
    <div class="grid-item">
        <img src="image-url" width="700" height="470">
    </div>
</div>

etc...

CSS Style is looking like:

.grid-item > img {
    height: auto;
}
.grid-item {
  float: left;
  padding: 0 10px 10px 0;
  width: 50%;
}

My first problem is that the following code which is in the header is not working, so I am not able to use imageloaded lib to prevent images to overlap when they are not cached. When i remove the html json code masonry is not working at all.

<script type="text/javascript" language="javascript">
    // external js: masonry.pkgd.js, imagesloaded.pkgd.js

    // init Masonry after all images have loaded
    var $grid = $('.grid').imagesLoaded(function () {
        $grid.masonry({
            itemSelector: '.grid-item',
            percentPosition: true,
            columnWidth: '.grid-sizer'
        });
    });
</script>

Masonry + Image Loaded is included in the header section.

But neither the java script to call masonry nor the imageloaded lib make any effect.

Can you help me analyzing my problem?

Luke

Answer 1

You are calling imagesLoaded before that lib has actually been loaded. Wrap it into document.ready callback.

<script type="text/javascript" language="javascript">
    $(function() {
        // external js: masonry.pkgd.js, imagesloaded.pkgd.js

        // init Masonry after all images have loaded
        var $grid = $('.grid').imagesLoaded(function () {
            $grid.masonry({
                itemSelector: '.grid-item',
                percentPosition: true,
                columnWidth: '.grid-sizer'
            });
        });
    });
</script>