Archived topic
call methods on masonry prior to initialization
4 replies · Started by SCIP on October 5, 2018
I have the a masonry blog which is filtered using facetwp.
I have added an element to the footer and included the code:
`(function($) {
$(document).on('facetwp-loaded', function() {
var $grid = $('.grid').imagesLoaded( function() {
$('.masonry-container').masonry('reload');
});
});
})(jQuery);'
This used to work. However, since using elements masonry breaks and I get the following error message
'cannot call methods on masonry prior to initialization; attempted to call 'reload''
This caused the class "are-images-unloaded" to set the opacity to 0.
Do you have any ideas how I can delay the reload until masonry has initilized.
Any help would be appreciated.
Many thanks
Mark
Hi Mark,
Try adding your JS inside a window loaded call:
jQuery( window ).load( function() {
// Your JS in here
} );Let me know :)
Thanks Tom
That didn't work unfortunately. I realised that I needed to rebuild the masonry layout so copied your original code and got it working.
I have used
<script>
jQuery( document ).ready( function( $ ) {
$(document).on('facetwp-loaded', function() {
var $masonry_container = $( '.masonry-container' );
var msnry = false;
if ( $masonry_container.length ) {
var $grid = $masonry_container.masonry({
columnWidth: '.grid-sizer',
itemSelector: 'none',
stamp: '.page-header',
percentPosition: true,
stagger: 30,
visibleStyle: { transform: 'translateY(0)', opacity: 1 },
hiddenStyle: { transform: 'translateY(5px)', opacity: 0 },
} );
msnry = $grid.data( 'masonry' );
$grid.imagesLoaded( function() {
$grid.masonry( 'layout' );
$grid.removeClass( 'are-images-unloaded' );
$( '.load-more' ).removeClass( 'are-images-unloaded' );
$( '#nav-below' ).css( 'opacity', '1' );
$grid.masonry( 'option', { itemSelector: '.masonry-post' });
var $items = $grid.find( '.masonry-post' );
$grid.masonry( 'appended', $items );
} );
$( '#nav-below' ).insertAfter( '.masonry-container' );
$( window ).on( "orientationchange", function( event ) {
$grid.masonry( 'layout' );
} );
}
});
});
</script>It might come in useful for someone else.
Awesome! Thanks for sharing :)
so copied your original code and got it working.
The original code is coming from gp-premium/blog/functions/js/scripts.js
