石造イメージギャラリーは機能していない、インラインJavascriptを私はちょうど画像ギャラリーを表示するには、私のワードプレスのサイトに石造libが含まれるいずれかの効果

Question

を取っていない：http://letpack.lukasoppler.ch/geschuetzte-arbeitsplaetze/gebaeudeunterhalt/

私はDIV要素にHTMLマークアップthroug石工を呼び出しています、それはこのように見える：

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

：

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

等...

CSSスタイルは次のように探しています

私の最初の問題は、ヘッダーにある次のコードが動作しないため、画像がキャッシュされていないときにイメージが重ならないようにimageloaded libを使用できないことです。私はhtml jsonコードを削除すると、まったく動作していません。

<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やimageloaded libを呼び出すJavaスクリプトは効果を発揮しません。

問題の分析を手伝ってもらえますか？

ルーク

Answer 1

そのlibには、実際にロードされている前に、imagesLoadedを呼んでいます。それをdocument.readyコールバックにラップします。

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