Я хочу фильтровать портфолио с помощью изотопа. Я могу показать элементы, но не могу фильтровать. Вот мой код. Посмотрите и поделитесь своими мыслями, что мне не хватает.
<ul id="cat"> <li> <ol class="type"> <?php $terms = get_terms('portfolio-type'); $count = count($terms); echo '<li><a href="javascript:void(0)" data-filter="*" class="active">All</a></li>'; if ( $count > 0 ){ foreach ( $terms as $term ) { $termname = strtolower($term->name); $termname = str_replace(' ', '-', $termname); echo '<li><a href="javascript:void(0)" data-filter=".'.$termname.'">'.$term->name.'</a></li>'; } } ?> </ol> </li> </ul> <div class="portfolio-items"> <?php $args = array( 'post_type' => 'portfolio', 'posts_per_page' => 8 ); $loop = new WP_Query( $args ); while ( $loop->have_posts() ) : $loop->the_post(); ?> <div class="col-sm-6 col-md-3 col-lg-3 web"> <div class="portfolio-item"> <div class="hover-bg"> <a href="<?php display_taxonomy_terms('portfolio-link'); ?>" title="Project description" rel="prettyPhoto" target="_blank"> <div class="hover-text"> <h4><?php the_title(); ?></h4> <small><?php display_taxonomy_terms('portfolio-type'); ?></small> </div> <img class="img-responsive" alt="Project Image" src="<?php echo the_post_thumbnail_url(); ?>"/> </a> </div> </div> </div> <?php endwhile; ?> </div> <script> (function($){ var $container = $('.portfolio-item'); // create a clone that will be used for measuring container width $containerProxy = $container.clone().empty().css({ visibility: 'hidden' }); $container.after( $containerProxy ); // get the first item to use for measuring columnWidth var $item = $container.find('.hover-bg').eq(0); $container.imagesLoaded(function(){ $(window).smartresize( function() { // calculate columnWidth var colWidth = Math.floor( $containerProxy.width() / 2 ); // Change this number to your desired amount of columns // set width of container based on columnWidth $container.css({ width: colWidth * 2 // Change this number to your desired amount of columns }) .isotope({ // disable automatic resizing when window is resized resizable: false, // set columnWidth option for masonry masonry: { columnWidth: colWidth } }); // trigger smartresize for first time }).smartresize(); }); // filter items when filter link is clicked $('#cat a').click(function(){ var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector, animationEngine : "css" }); $('#cat a.active').removeClass('active'); $(this).addClass('active'); return false; }); } ) ( jQuery ); </script>