Masonry Wordpress $(window).load никогда не загружается

Я пытаюсь интегрировать 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;
}

Любая помощь будет оценена по достоинству, спасибо!


person cericf    schedule 17.01.2013    source источник


Ответы (1)


Попробуйте использовать jQuery вместо $

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

Я проверил это на вашей странице в Chrome, и $('#linky') выдает ошибку, но jQuery('#linky') работает. Похоже, вы где-то звоните jQuery.noConflict(), так как вы также используете jQuery(function() вместо $(function().

person TheVillageIdiot    schedule 17.01.2013
comment
Я знал, что это должно быть что-то простое. Отлично работает сейчас. Спасибо! - person cericf; 17.01.2013