私は子Wordpressテーマ(Blanco)を使用しており、jQuery Masonryを使用して画像ギャラリーページを作成しようとしていますが、masonry機能が機能していないようで、すべてが浮いているように見えます. 柱には垂直方向の隙間があります。FireBug によって検出されるエラーもあります。TypeError: $("#pincontainer").masonry is not a function
ギャラリーはここにあります: www.christaalexandra.com/gallerie/
ヘッダーに次のコードがあります。
<?php wp_enqueue_script('jquery'); ?>
<?php wp_head(); ?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="/js/jquery.masonry.min.js"></script>
<script language="javascript" type="text/javascript">
// This line tells the script to run after the page is loaded,
// As well as allows you to use the `$` function within the script
jQuery(function($) {
$('#pincontainer').masonry({
itemSelector: '.pin-gallery',
});
});
</script>
スタイルシートに次の CSS があります。
#pincontainer{
margin:0 auto;
margin-top:50px;
}
.pin-gallery{
width: 220px;
margin: 10px;
float: left;
}
マイ ギャラリー ページには次の HTML があります。
<div id="pincontainer">
<div class="pin-gallery"><img src="/wp-content/uploads/2012/11/baby_shower_invitation_rocket_baby_spaceship_thank_you_card_stars_1.jpg" alt="" /></div>
<div class="pin-gallery"><img src="/wp-content/uploads/2012/11/black_and_white_inspiration_wedding_invitations.jpg" alt="" /></div>
<div class="pin-gallery"><img src="/wp-content/uploads/2012/11/blue_rope_ship__ocean_nautical_baby_shower_invitation_thank_you_card_4.jpg" alt="" /></div>
...(more div's here)...
</div>
<!--End Container-->
ギャラリーが正しくスタックされないのはなぜですか? JS ファイルは子テンプレートの JS フォルダーに存在しますが、別の場所にある必要がありますか? 私はこれを調査するのに何時間も費やし、潜在的な問題を確認して再確認したように感じますが、私は初心者レベルであるため、非常に明白なことかもしれません. よろしくお願いします。