Я пытаюсь интегрировать 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 »'); ?>
</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;
}
Любая помощь будет оценена по достоинству, спасибо!