Mauerwerk Bildergalerie nicht funktioniert, Inline-Javascript keine Auswirkungen nehmen

Question

I enthalten nur Mauerwerk Lib in meine Wordpress-Seite eine Bildergalerie anzuzeigen: http://letpack.lukasoppler.ch/geschuetzte-arbeitsplaetze/gebaeudeunterhalt/

I Mauerwerk throug HTML-Markup im div-Elemente nennt, ist es wie folgt aussehen:

<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 Stil sucht wie:

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

Mein erstes Problem ist, dass der folgende Code, der in der Kopfzeile ist, nicht funktioniert, also kann ich nicht imageloaded lib verwenden, um zu verhindern, dass Bilder sich überlappen, wenn sie nicht zwischengespeichert werden. Wenn ich den HTML-JSON-Code entfernen, funktioniert Maurerarbeit überhaupt nicht.

<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> 

Mauerwerk + Bild geladen ist im Kopfbereich enthält.

Aber weder das Java-Script zum Aufruf von Maurerarbeit noch die im Image geladene Lib machen irgendeinen Effekt.

Können Sie mir helfen, mein Problem zu analysieren?

Luke

Answer 1

Sie rufen imagesLoaded vor, dass lib geladen tatsächlich wurde. Wickeln Sie es in document.ready Rückruf ein.

<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>