Question

I’m attempting to integrate Masonry into an existing modified WordPress site. I originally wrote the script as $(document).ready but encountered the very common timing issue, resulting in overlapping images, so I rewrote as $(window).load. The images now load in a standard single column layout, and Masonry never loads. I’ve tried writing the order in a variation of ways, but have yet to see any progress. I’m unable to simply tell the jQuery what height to be aware of since each image is a different size.

*I’m certain the original problem is a timing issue since the page loaded with overlapping images, but when I click to another page then back, the Masonry layout reloads perfectly.

SCRIPT

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;
}

Any help would be appreciated,
Thanks!

Answer 1

Well try using jQuery instead of $

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

I’ve tested it on your page in Chrome and $('#linky') gives error but jQuery('#linky') works. Seems like you are calling jQuery.noConflict() somewhere as you are also using jQuery(function() instead of $(function().