1

私は子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 フォルダーに存在しますが、別の場所にある必要がありますか? 私はこれを調査するのに何時間も費やし、潜在的な問題を確認して再確認したように感じますが、私は初心者レベルであるため、非常に明白なことかもしれません. よろしくお願いします。

4

0 に答える 0