벽돌 이미지 갤러리하지, 인라인 자바 스크립트가 난 그냥 이미지 갤러리 표시 내 워드 프레스 사이트에 벽돌 lib 디렉토리를 포함

Question

영향 복용하지 : http://letpack.lukasoppler.ch/geschuetzte-arbeitsplaetze/gebaeudeunterhalt/

내가 DIV 요소의 HTML 마크 업을 통해 서 벽돌을 부르고을, 그것은이다 이처럼 보이는 :

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

로드 된 이미지는 머리글 섹션에 포함됩니다.

그러나 벽돌이나 imageloaded lib를 호출하는 자바 스크립트는 효과가 없습니다.

내 문제를 분석하도록 도와 줄 수 있습니까?

누가 그 lib 디렉토리가 실제로로드되기 전에 당신은 imagesLoaded 호출

Answer 1

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