using isotope library with square layout library - wordpress

Question

My problem is to create layout as in example http://www.jqueryscript.net/demo/Responsive-Square-Grid-Layout-jQuery/ and use isotop filtering.
And I use also isotope library for filtering,
here is a code for filtering:
var $grid = jQuery('.mansory_wrapper').isotope({
itemSelector: '.grid-item1',
percentPosition: true,
masonry: {
columnWidth: 100
}
});
But I have a gap. When I use only this library, the filtering fails.
Has any idea to do it?

Answer 1

Do you have try using isotope library from Masonry? I think this is great, i have try created in my project you can check in here.
This is my code for display Filtered button in WordPress
<div class="button-group filters-button-group">
<?php
$taxonomy = 'category-produk';
$terms = get_terms($taxonomy);
foreach ( $terms as $term ) {
echo '<button class="button" data-filter=".'.$term->slug.'">'.$term->name.'</button>';
}
?></div>
Also this for display the Grid in WordPress
<div class="grid">
<?php
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'produk',
'posts_per_page' => -1
);
$product = new WP_Query($args);
if( $product-> have_posts() ){
while ( $product->have_posts() ) : $product->the_post();
$categories = get_the_terms(get_the_ID(), 'category-produk');
$class = "";
foreach($categories as $cat){
$class .= $cat->slug . " ";
}
?>
<div class="col-md-4 <?php echo $class; ?>">
<div class="side-module text-center">
<a class="img-module clearfix" href="<?php echo get_the_permalink(); ?>">
<?php
$id = get_the_ID();
$url = wp_get_attachment_url( get_post_thumbnail_id($id), 'biofarma-featured-image' );
//echo 'Image '.$url;
if ( !empty($url) ) {
echo '<img src="' . $url . '" />';
}
else {
echo '<img src="' . get_template_directory_uri() . '/img/dummy.png" />';
}
?>
</a>
<a class="view-prod" href="<?php echo get_the_permalink(); ?>"> <h4><?php the_title(); ?></h4> </a>
<p><?php echo get_post_meta($id, 'meta_data', true); ?></p>
</div>
</div>
<?php
endwhile;
wp_reset_postdata();
}
?>
</div>
Also in my jQuery script like this:
(function($) {
"use strict"; // Start of use strict
$(function(){
var $grid = $('.grid').isotope({
itemSelector: '.col-md-4',
layoutMode: 'masonry'
});
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});
var filterFns = {
// show if name ends with -ium
ium: function() {
var name = $(this).find('.name').text();
return name.match( /ium$/ );
}
};
$('.filters-button-group').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$grid.isotope({ filter: filterValue });
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
});
});
Hopefully this is clear and helping you.