Gists

// Init and reload masonry layout after facet filtering
// Works for https://masonry.desandro.com
// This needs the imagesLoaded() script, to be downloaded separately: 
// https://masonry.desandro.com/layout.html#imagesloaded

// Init Masonry
var $grid = jQuery('.facetwp-template').masonry({
  itemSelector: '.facetwp-template',
  columnWidth: 220,
  gutter:20,
});

// Reload and update on facetwp-loaded
jQuery(document).on('facetwp-loaded', function() {
  $grid.masonry('reloadItems')

  // Update Masonry layout after each image has loaded
  $grid.imagesLoaded().progress( function() {
    $grid.masonry('layout');
  });
});

<?php

// Retrigger/reload masonry layout after facet filtering
// Works for https://masonry.desandro.com

// If you get overlapping images etc. use the imagesLoaded check like this:
// https://gist.facetwp.com/gist/reload-masonry-layout-after-filtering-with-imagesloaded/

add_action( 'wp_head', function() { ?>

    <script>
      (function($) {
        $(document).on('facetwp-loaded', function() {
          if (FWP.loaded) {
            $('.facetwp-template').masonry('reloadItems').masonry('layout');
          }
        });
      })(jQuery);
    </script>

<?php }, 100 );

<?php
/** re-triggers masonry from generate press pro plugin after facet loads **/
add_action( 'wp_head', function() { ?>
<script>
document.addEventListener('facetwp-loaded', function() {
	var msnry = new Masonry( ".facetwp-template", generateBlog.masonryInit );	
	msnry.layout();
});
</script>
<?php }, 100 );

(function($) {
    $(document).on('facetwp-loaded', function() {
        $(".init-masonry-intrinsic").each(function() {
            var t = $(this)
              , e = $(this).data("masonry-selector")
              , i = !0;
            $("body.rtl").length && (i = !1),
            t.masonry({
                itemSelector: e,
                isOriginLeft: i
            }),
            t.find(".kt_item_fade_in").each(function(t) {
                $(this).delay(75 * t).animate({
                    opacity: 1
                }, 175)
            })
        })
    });
})(jQuery);

<?php
/**
 ** re-run masonry layout for beaver builder masonry post module after refreshing facets
 **/
add_action( 'wp_head', function() { ?>

    <script>
        (function($) {
            $(document).on('facetwp-loaded', function() {
                var $element 		= 'undefined' == typeof element ? $( 'body' ) : $( element ),
                    msnryContent	= $element.find('.masonry');
                if ( msnryContent.length )	{
                    msnryContent.masonry('layout');
                }
            });
        })(jQuery);
    </script>

<?php } );

<?php

// Add the following into functions.php

add_action( 'wp_footer', function() {
?>
<script>
(function($) {
    $(document).on('facetwp-loaded', function() {
        if (FWP.loaded) {
            $grid = $('.fusion-blog-layout-grid');
            $grid.isotope('appended', $grid.find('article'));
            $grid.imagesLoaded(function() {
                $grid.isotope('layout');
            });
        }
    });
})(jQuery);
</script>
<?php
}, 100 );

<script>

(function($) {
    $(document).on('facetwp-loaded', function() {
        var $grid = $('.columns-3').imagesLoaded(function() {
            $grid.isotope({
                layoutMode: 'masonry',
                itemSelector : '.product',
                masonry: {
                    columnWidth: '.product',
                }
            });
        });
    });
})(jQuery);

</script>

(function($) {
    $(document).on('facetwp-loaded', function() {
        if (FWP.loaded) { // trigger only after the initial refresh
            $blogGrid = $( '.fusion-blog-layout-grid' ); // this to the class or id to apply isotope to
	        $blogGrid.isotope( {
                // options - change these options to match the isotope options in use - https://isotope.metafizzy.co/options.html
                itemSelector: 'article',
                layoutMode: 'masonry'
            });
            $blogGrid.imagesLoaded(function() {
                $blogGrid.isotope('layout');
            });
        }
     });
})(jQuery);

(function($) {
    $(document).on('facetwp-loaded', function() {
    if ( $().isotope ) {

      var $container = $( '#tribe-events-photo-events' )

      $container.isotope({
        itemSelector: '.tribe-events-photo-event',
        percentPosition: true,
        masonry: {
          columnWidth: '.tribe-events-photo-grid-sizer',
          gutter: '.tribe-events-photo-gutter-sizer'
        }
      });

      $container.imagesLoaded().progress( function() {
        $container.isotope( 'layout' );
      });

    } else {
      $( '#tribe-events-photo-events' ).removeClass( "photo-hidden" ).css( "opacity", "1" );
    }
      
     });
})(jQuery);