0

I built my site with Wordpress.org and the theme calls Imbalance2. I noticed that this theme has a bug and I searched topics about the overlapping issue because of Masonry js. I use the imagesLoaded (from user Leger at Using masonry with imagesloaded, thanks!): it works but sometimes my Chrome stills overlapping. I decide to add a pagination instead the "Lazy Load" (to avoid more problems…) but I can't merge imagesLoaded for #boxes and #related…

Could you please help me? Here my site address

Thanks so much for your time!!!

<script src="http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {

// grid
var $boxes = $('.box');
$boxes.hide();

var $container = $('#boxes');
$container.imagesLoaded( function() {
$boxes.fadeIn();

$container.masonry({
itemSelector: '.box',
columnWidth: 290,
gutterWidth: 40
});
});

$('#related').masonry({
    itemSelector: '.box',
    columnWidth: 290,
    gutterWidth: 40
}).masonry('reload');

});
</script>
Community
  • 1
  • 1
Halman
  • 1
  • 1

2 Answers2

0

This tweak is a fix on chrome and safari browser.

Add this line.

jQuery("img").load(function() { jQuery(".container_class").masonry(); //this tweak is a fix on chrome and safari browser });

Dharmik
  • 369
  • 4
  • 11
  • Hello Dharmik: Thanks so much for your answer! However I don't how to add this line (I'm a beginner in js). If I put it before "var $boxes = $('.box');" Masonry doesn't work. Maybe I have to add this line instead "imagesLoaded"? Could you please help me with this? Thanks in advance! – Halman Sep 10 '14 at 08:56
0

Here the solution I found. As I said I changed the "Lazy Load" for pagination and I wrote the code below thanks to some users that shared their solutions in this Forum.

<script src="http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {

// grid
var $boxes = $('.box');
$boxes.hide();

var $container = $('#boxes');
$container.imagesLoaded( function() {
$boxes.fadeIn();

$('#boxes').masonry({
    itemSelector: '.box',
    columnWidth: 286,
    gutterWidth: 40
});
});

var $container = $('#related');
$container.imagesLoaded( function() {
$('#related').masonry({
    itemSelector: '.box',
    columnWidth: 286,
    gutterWidth: 40
});
});

});
</script>
Halman
  • 1
  • 1