Masonry breaks in Chrome

[matt25]

Hi, I am building a new site at frictionmultimedia.com and I am using the masonry script for the first time.

It works fine in Firefox and IE but in chrome all the boxes overlap and I cannot work out why.

As Requested I have stripped the site down to the bare minimum but I cannot seem to work it out still. The stripped down version is at http://frictionmultimedia.com/masonry/

I am using Chrome version 27.0.1453.116 m

As I say, I have tried everything I can think of but I cannot work it out, Please can you give me some suggestions?

Any help is much appreciated.

Thanks, Matt

[desandro]

Before I take a look, have you seen http://masonry.desandro.com/faq.html#overlapping ?

[matt25]

Thanks for the reply. I hadn't no, But I have now implemented the images loaded plugin and it is still not working.

I have updated the stripped down version too.

Thanks,
Matt

[desandro]

Looks like your PHP tag isn't rendering correctly.

<script type="text/javascript"
   src="<?php bloginfo("template_url"); ?>/js/imagesloaded.pkgd.min.js"></script>

I think once you resolve that, it should be working just fine. I'm going to close this as a personal issue.

[matt25]

Hi, Thanks for the response. That was my fault I hadn't changed the url to the script on the stripped down version which isn't using wordpress. The link now looks like this:

<script type="text/javascript"
   src="http://www.frictionmultimedia.com/wp-content/themes/murtaugh-HTML5-Reset-Wordpress-Theme-9c9ec4f/js/imagesloaded.pkgd.min.js"></script>

But it still isn't working so the php I dont think can be the root of the issue.

Thanks,
Matt

[desandro]

Trigger this in document ready.

jQuery( document ).ready( function( $ ) {
  var $container = $('#hWr').masonry({
    columnWidth: 1
  });
  $container.imagesLoaded( function() {
    $container.masonry();
  });
});

Also setting columnWidth: 1 will hurt performance. ColumnWidth should be a multiple so that Masonry doesn't have to split up its measurements into 800 1-pixel columns

[matt25]

Thanks very much, That worked perfectly!

I will change the ColumnWidth now.

Thanks again for the help, it is much appreciated.

Matt

[rnmp]

Why don't you try Salvattore, does pretty much the same thing, and you are responsible of the layout, setting up everything in CSS and HTML.

http://salvattore.com/

[jbonpland2]

@desandro how are you? where should i put the code you mention ?
jQuery( document ).ready( function( $ ) { var $container = $('#hWr').masonry({ columnWidth: 1 }); $container.imagesLoaded( function() { $container.masonry(); }); });

i'm having an issue that when i go to one section it loads one of the images full size, then i hit f12 on chrome and that action does the trick and show the masonry layout perfectly fine. I dont why.
could bootstrap be affecting this? cause when i load the page maximized it doesn work, when i load it in lower resolution it works, huh?