1 year ago
// 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');
});
});
1 year ago
<?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 );
2 years ago
<?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 );
5 years ago
(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);
6 years ago
function resizeGridItem(item){
grid = document.getElementsByClassName("fwpl-layout")[0];
rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
rowSpan = Math.ceil((item.querySelector('.fwpl-row').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));
item.style.gridRowEnd = "span "+rowSpan;
}
function resizeAllGridItems(){
allItems = document.getElementsByClassName("fwpl-result");
for(x=0;x<allItems.length;x++){
resizeGridItem(allItems[x]);
}
}
function resizeInstance(instance){
item = instance.elements[0];
resizeGridItem(item);
}
window.onload = resizeAllGridItems();
window.addEventListener("resize", resizeAllGridItems);
allItems = document.getElementsByClassName("fwpl-result");
for(x=0;x<allItems.length;x++){
imagesLoaded( allItems[x], resizeInstance);
}
6 years ago
<?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 } );
6 years ago
<?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 );
3 years ago
<script>
(function($) {
$(document).on('facetwp-loaded', function() {
var $grid = $('.columns-3').imagesLoaded(function() {
$grid.isotope({
layoutMode: 'masonry',
itemSelector : '.product',
masonry: {
columnWidth: '.product',
}
});
});
});
})(jQuery);
</script>
5 years ago
(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);
5 years ago
<?php
/** add additional classes / id to the facetwp-template div generated by a facetwp
** layout template
**/
add_filter( 'facetwp_shortcode_html', function( $output, $atts) {
if ( $atts['template'] = 'example' ) { // replace 'example' with name of your template
/** modify replacement as needed, make sure you keep the facetwp-template class **/
$output = str_replace( 'class="facetwp-template"', 'id="masonry-container" class="facetwp-template small-up-1 medium-up-2 large-up-3"', $output );
}
return $output;
}, 10, 2 );