Isotop gutter-sizer сворачивается при нажатии кнопки фильтра

У меня есть фильтр Isotope, работающий с WordPress для фильтрации сообщений. Он использует макет каменной кладки с размером желоба, установленным в процентах в CSS. Все это работает фантастически при загрузке страницы, пока я не нажму что-нибудь на фильтре, а затем разрыв желоба рухнет и не будет работать снова, пока я не перезагружу страницу или не изменю размер окна браузера.

Любая помощь будет высоко оценена, я полностью потерян!

Вот как я инициализирую код:

$( function() {
  $('.container').isotope({
  itemSelector: '.item',
  percentPosition: true,
  layoutMode: 'masonry',
  masonry: {
    columnWidth: '.grid-sizer',
    gutter: '.gutter-sizer'
   }
  })
});

Редактировать:

Вот CSS

.gutter-sizer {
width: 1.7241379%;
}


.item, .grid-sizer {
    width: 100%; // width of each brick less the padding inbetween
    margin-bottom: 20px;
    @include border-radius(2px);
    @include shadow;
    background-color: $white;
        @media only screen and (min-width: 600px) {
    width: 49.13793105%;
        }
    @media only screen and (min-width: 900px) {
        width: 23.7068966%;
    }
}

А вот код фильтра и постов кладки:

    <!-- #filter-menu -->   <nav id="filter-navigation" class="main-filter-navigation item" role="navigation">

        <button class="filter-toggle"><?php _e( 'Filter', 'cambridgerules' ); ?><i class="fa fa-filter"></i></button>

        <ul class="filters">
            <li class="filter-all"><a href="#" data-filter="*" class="selected">All</a></li>
            <li class="interpret-filter-label">Interpreted Worldwide:</li>
            <?php
            $terms = get_terms("type"); // get all categories, but you can use any taxonomy
            $count = count($terms); //How many are they?
            if ( $count > 0 ){  //If there are more than 0 terms
                foreach ( $terms as $term ) {  //for each term:
                    echo "<li class='".$term->slug."'><a href='#' data-filter='.".$term->slug."'>" . $term->name . "</a></li>\n";
                    //create a list item with the current term slug for sorting, and name for label
                }
            }
            ?>
        </ul>
    </nav><!-- #filter-menu -->


    <div class="container">
        <div class="grid-sizer"></div>
        <div class="gutter-sizer"></div>

        <?php $the_query = new WP_Query( array(
            'showposts' => 50,
            'post_type' => array('interpreted')
            )
            ); //Check the WP_Query docs to see how you can limit which posts to display ?>
            <?php if ( $the_query->have_posts() ) : ?>
                <div id="isotope-list">


                <?php while ( $the_query->have_posts() ) : $the_query->the_post();
                    $termsArray = get_the_terms( $post->ID, "type" );  //Get the terms for this particular item
                    $termsString = ""; //initialize the string that will contain the terms
                    foreach ( $termsArray as $term ) { // for each term
                    $termsString .= $term->slug.' '; //create a string that has all the slugs
                    }
                ?>

                <div class="<?php echo $termsString; ?> item"> <?php // 'item' is used as an identifier (see Setp 5, line 6) ?>
                    <h3><?php the_title(); ?></h3>
                    <?php if ( has_post_thumbnail() ) {
                        the_post_thumbnail();
                    } ?>
                </div> <!-- end item -->
<?php endwhile;  ?>
</div> <!-- end isotope-list -->
<?php endif; ?>

</div> <!-- end container -->

javascript wordpress jquery masonry jquery-isotope
person leanda    schedule 17.07.2015    source источник
comment
Можете ли вы опубликовать минимальный, полный и проверяемый пример? Также было бы полезно увидеть разметку HTML/CSS.   -  person rnevius    schedule 18.07.2015
comment
Спасибо за ответ, я добавил пометку выше. Надеюсь, это поможет.   -  person leanda    schedule 18.07.2015
comment
Я не вижу кода твоего изотопного фильтра.   -  person Macsupport    schedule 18.07.2015

Ответы (1)


arrow_upward
0
arrow_downward

Хорошо, разобрался с этим, используя следующий код:

jQuery(function ($) {

var $container = $('.container'); //The ID for the list with all the blog posts
$container.isotope({ //Isotope options, 'item' matches the class in the PHP
    itemSelector : '.item',
    layoutMode : 'masonry',
    masonry: {
  columnWidth: '.grid-sizer',
  gutter: '.gutter-sizer'
}
});

//Add the class selected to the item that is clicked, and remove from the others
var $optionSets = $('.filters'),
$optionLinks = $optionSets.find('a');

$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
  return false;
}
var $optionSets = $this.parents('.filters');
$optionSets.find('.selected').removeClass('selected');
$this.addClass('selected');

//When an item is clicked, sort the items.
 var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });

return false;
});

});
person leanda    schedule 17.07.2015