Masonry Gallery – Images Stacking On Top Of Each Other

Hi!

The fix is not included on the latest update because not all gallery installation have this issue. I guess this only happens to websites with multiple and heavy images. You can remove the code on avia.js then add this to the functions.php file:

function add_custom_script(){
?>
<script>
(function($){
    $(window).load(function() {
    	$(this).trigger('resize');
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');

The code above will also resize the windows automatically, forcing the gallery images to adjust to the correct position.

Best regards,
Ismael

Hi!

Try to replace the code with this:

function add_custom_script(){
?>
<script>
(function($){
    	$(window).trigger('resize');
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');

Best regards,
Ismael

Hi!

I checked the site but I cannot reproduce the issue anymore. Please create a test page with a gallery element. Add more than 8 gallery items.

Regards,
Ismael

Hey!

Yes, please create a test page. Post the login details here. We would like to check it. :)

I noticed that the images are not fully optimized. Maybe, having a fully optimized gallery images will fix the issue. Let’s check this image for example: http://www.tinyillusion.com/wp-content/uploads/2014/12/Ian-Elain-793-1030×686.jpg

I was able to reduce the file size from 288KB to 140KB+, just by resaving the images using photoshop. I set the file format to jpeg and quality to 8 or 9, you think that this will lower the image quality but it doesn’t. You won’t be able to tell the difference, at least not in most cases. I’m not a photographer so maybe I don’t see it clearly. If you don’t want to do this manually, you can try this plugin: https://wordpress.org/plugins/ewww-image-optimizer/

Cheers!
Ismael

Hey!

Thank you for the login details but I think you forgot to set it as admin so we can’t edit anything. Please check the user rights. Anyway, please remove the first auto resize function then replace it with this:

add_action('wp_footer', 'ava_auto_resize');
function ava_auto_resize(){
?>
<script>
(function($){	
	var int = window.setInterval(function(){
		$(window).trigger('resize');
	}, 2000);
	
	$(window).load(function () {
		setTimeout(function() {
			clearInterval(int);
		}, 5000);
	});
})(jQuery);
</script>
<?php
}

This will trigger the resize event every two seconds and force the gallery items to adjust their position. It will stop after 5 seconds the page has been fully loaded. I hope it fix the issue.

Cheers!
Ismael

Hey!

It’s in the functions.php file. The code is working. As you can see the gallery items automatically adjust their position while loading. Remove browser cache then reload the page: http://www.tinyillusion.com/test-page-for-gallery/

Regards,
Ismael

Hi!

@ElainL: Yes, it is on the child theme’s functions.php file. You don’t need to do anything when you update the theme.

@John: Add the code in the functions.php file: https://kriesi.at/support/topic/masonry-gallery-images-stacking-on-top-of-each-other/#post-433895

Best regards,
Ismael