We Keep Coding

Masonry- divs overlapping with imagesLoaded plugin

I have the Masonry plugin and the Images Loaded plugin and it seems imagesloaded isn't working. When I refresh the page the divs overlap. Only after resizing the browser window does the overlapping corrects itself. Sometimes upon refreshing it seems it does work... it's pretty random. I'm a newbie with jQuery and javascript.
I hosted the single html page here so you can see what I'm talking about: masonry test
Here's how I'm initializing, but you can see the full code if you look at the source code for the link above because the problem might be elsewhere.
$(document).ready(function() {
// Initialize Masonry
$('#content').masonry({
columnWidth: 320,
itemSelector: '.item',
isFitWidth: true,
isAnimated: true,
}).imagesLoaded(function() {
$(this).masonry('reload');
});
});

The problem is that imagesLoaded() is being called before the masonry plugin finishes initializing. If you look in the browser console on your test page, you will see an error to that affect.
Take a look at the example on the developer's site for how to use imagesLoaded together with masonry. Instead of chaining the functions, you should wait until the images have loaded to initialize masonry.
$('#content').imagesLoaded(function() {
$('#content').masonry({
columnWidth: 320,
itemSelector: '.item',
isFitWidth: true,
isAnimated: true,
});
});
You might be able to do it how you originally attempted (ie. chaining the methods), but you cannot use $(this) in your imagesLoaded function. This function is a callback, so it is not being executed synchronously. If you change your function to
$('#content').masonry('reload');
it might work they way you wanted, but I haven't tested this.

Problems with Masonry, jQuery and imagesLoaded

Web noobie here. I'm having a problem getting Masonry to work properly with the site I'm building. Here is the code I'm trying to execute:
$( document ).ready(function() {
...
var $article_display = $('#article_display');
$article_display.imagesLoaded(function() {
$article_display.masonry({
columnWidth: Math.floor($('#article_display').width() *.3) + 2,
itemSelector: '.article',
isAnimated: !Modernizr.csstransitions
});
});
...
});
I'm getting this error: "Uncaught TypeError: Object [object Object] has no method 'imagesLoaded' ." I've looked around for the past two days to find some kind of solution to this before posting this question here and have been unsuccessful so far. It seems like my browser isn't recognizing that I've included the imagesloaded.pkgd.min.js file...? According to the reference material here: http://masonry.desandro.com/appendix.html this code should work.
Any help would be greatly appreciated, I can try to get a jsfiddle set up if that would make a difference.
Thanks!
Edit: Here's a JSFiddle showing the issue: http://jsfiddle.net/DDQtD/

Figured it out. I had a typo when I was loading my scripts, it looked like this:
<script type="filepath/imagesloaded.pkgd.min.js"></script>
I needed to switch out type with src. So many simple mistakes!

I would try Salvattore, it works in a different way so images don't have to load before the script is loaded, and you can configure the script with CSS and HTML.
http://salvattore.com/

JQuery Isotope not triggering

I have added the JQuery plugin Isotopte to my site.
It works but only after the browser resizes. The images just seem to stack up on each other before hand.
My code to is:
$(function(){
$('#isotopecontainer').isotope({
itemSelector: '.frontitem',
masonry: {
}
});
});
I've tried adding columnWidth as the site suggests but this makes no difference.
Im really not sure what is going on. Can anyone help me out at all?

I don't know exactly where your issue is but I got a working solution.
Working solution (JSFiddle)
$(document).ready(function(){
$('#isotopecontainer').isotope({
// options
itemSelector : '.frontitem',
masonry : {}
});
}
);
It has all of your options but I can't seem to find exactly where your code is wrong. I did use the document ready callback that jquery supplies however I don't think that was the issue.
Also make sure you include jquery before isotope.

Masonry is not loading on Wordpress blog

I've been trying to get Masonry to stack my posts on this blog for the past two days:
topheavypilesofbooks.com. The posts should stack neatly with no whitespace. Instead posts float as usual, with lots of vertical whitespace.
This is a Wordpress blog, and I've added the javascript with the enqueue function. According to Firebug, the javascripts are loading correctly.
The last script I load is the function to trigger Masonry, it is this:
jQuery((window).load(){
jQuery('#content').masonry({
// options
itemSelector : '.post',
columnWidth : 240
});
});

It looks like you have an error with your brackets.
Try this... I ran it on your site and it functions. Might require some tweaking, that I currently dont have time to do :)
jQuery(function () {
jQuery('#content').masonry({
itemSelector: '.post',
columnWidth: 240
});
})

jQuery functions not working after Infinite Scroll (AJAX) with Masonry

this may get complicated so I will try to explain my situation as best as I can.
I am using this jquery plugin http://www.infinite-scroll.com/ along with masonry: http://masonry.desandro.com/
Everything is working fine.
However, I'm trying to make some info relating to each post appear when you hover over a post. Here is my code:
$(".main").hover(function(){
$(this).next(".info").slideToggle("fast");
});
This only works on the first page content and not the extra content that is loaded by the infinite scroll.
So I tried adding the function to the callback of my masonry code:
// trigger Masonry as a callback
function(newElements) {
// hide new items while they are loading
var $newElems = $(newElements).css({opacity: 0});
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({opacity: 1});
$container.masonry('appended', $newElems, true);
});
$(".main").hover(function(){
$(this).next(".info").slideToggle("fast");
});
});
(Excuse me if I'm doing this completely wrong, I have never worked with Ajax before and am merely experimenting)
This made the hover function work on the new extra content loaded by Infinite scroll, however it then conflicted with the original content.
So, what is the best way to implement my hover function so it will work properly for all posts loaded before and after the Ajax call?
Thanks.
EDIT:
Solved the problem by changing my method to this:
$(document).on("click",".main",function(){
$(this).next(".info").slideToggle("fast");
});
http://api.jquery.com/on/
I will leave the original question here incase someone with a similar problem finds it useful.

$(document).on("click",".main",function(){
$(this).next(".info").slideToggle("fast");
});

For latest version of http://www.infinite-scroll.com/ along with masonry: http://masonry.desandro.com/ following code worked for me:
$grid.on( 'append.infiniteScroll', function( event, response, path, items ) {
$(this).next(".info").slideToggle("fast");
// OR your code you want to load after infinite scroll loads
});
Check for more here https://infinite-scroll.com/events.html#append