en utilisant la bibliothèque d'isotopes avec la bibliothèque de mise en page carrée

Question

Mon problème est de créer une disposition comme dans l'exemple http://www.jqueryscript.net/demo/Responsive-Square-Grid-Layout-jQuery/ et d'utiliser le filtrage isotop. Et je utiliser des isotopes également la bibliothèque pour le filtrage, est ici un code pour le filtrage:

var $grid = jQuery('.mansory_wrapper').isotope({ 
     itemSelector: '.grid-item1', 
     percentPosition: true, 
     masonry: { 
      columnWidth: 100 
     } 
    }); 

Mais j'ai un écart. Lorsque je n'utilise que la bibliothèque this, le filtrage échoue.

A une idée pour le faire?

Answer 1

Avez-vous essayé d'utiliser la bibliothèque d'isotopes de Masonry? Je pense que c'est génial, j'ai essayé de créer dans mon projet, vous pouvez vérifier here.

Ceci est mon code pour afficher le bouton Filtrée dans 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> 

également ceci pour afficher la grille dans 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> 

également dans mon script jQuery comme ceci:

(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'); 
     }); 
    }); 
}); 
}); 

Espérons que cela soit clair et utile.