0

Masonryを既存の変更されたWordpressサイトに統合しようとしています。私はもともとスクリプトを$（document）.readyとして作成しましたが、非常に一般的なタイミングの問題が発生し、画像が重複するため、$（window）.loadとして書き直しました。画像は標準の単一列レイアウトで読み込まれるようになり、Masonryは読み込まれません。さまざまな方法で注文を書いてみましたが、まだ進展が見られません。画像ごとにサイズが異なるため、jQueryに認識すべき高さを簡単に伝えることはできません。

*元の問題は重複する画像が読み込まれたページであるためタイミングの問題であると確信していますが、別のページをクリックしてから戻ると、Masonryレイアウトが完全に再読み込みされます。

脚本

jQuery(function($){
// Grid JS
/*
$(document).bind('keydown', 'Alt+Shift+g', function(){
$("div#container").toggleClass("grid");
});

*/
$('#linky').masonry({
singleMode: true, 
itemSelector: '.boxy' 
});

$('.boxy').hover(function() {
$(this).addClass('boxy-hover');
}, function() {
$(this).removeClass('boxy-hover');
});  
});

HTML

<div id="linky">
<?php
  $linksPosts = new WP_Query();
  $linksPosts->query('showposts=15&cat=-7');
?>
<?php while ($linksPosts->have_posts()) : $linksPosts->the_post(); ?>
<div class="boxy">
<div class="read">
<a href="<?php if(get_post_meta($post->ID, "url", true)) echo get_post_meta($post->ID,      "url", true); else the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>
</div>
<?php endwhile; ?>
</div>

CSS

#linky {
width: 1008px;
height: 100%;
} 

#linky .boxy {
width: 306px;
height: auto;
padding: 0 15px 15px 0;
margin-left: 15px;
}

.read {
height: auto;
}

.read img{
max-width: 306px;
height: auto;
}

助けていただければ幸いです、ありがとう！

4

1 に答える 1

0

jQuery代わりに使ってみてください$

jQuery('#linky').masonry({
    singleMode: true, 
    itemSelector: '.boxy' 
});

Chromeのページでテストしました$('#linky')が、エラーが発生しますが、jQuery('#linky')機能します。の代わりにjQuery.noConflict()使用しているので、どこかで電話をかけているようです。jQuery(function()$(function()

于 2013-01-17T02:47:27.757 に答える