[Resolved] call methods on masonry prior to initialization

Home Forums Support [Resolved] call methods on masonry prior to initialization

Home Forums Support call methods on masonry prior to initialization

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #694294
    markinbrighton

    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

    GeneratePress 2.1.4
    GP Premium 1.7.2
    #694613
    Tom
    Lead Developer
    Lead Developer

    Hi Mark,

    Try adding your JS inside a window loaded call:

    jQuery( window ).load( function() {
        // Your JS in here
    } );

    Let me know ๐Ÿ™‚

    #694806
    markinbrighton

    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.

    #694985
    Tom
    Lead Developer
    Lead Developer

    Awesome! Thanks for sharing ๐Ÿ™‚

    #2164674
    Aaron

    so copied your original code and got it working.

    The original code is coming from gp-premium/blog/functions/js/scripts.js

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.