Как отредактировать / удалить представление `show all` в библиотеке изотопов? - PullRequest
Новая
       8

Как отредактировать / удалить представление `show all` в библиотеке изотопов?

0 голосов
/ 03 января 2019

Об этом есть еще две темы, но они мне не помогли.

У меня есть этот HTML: 

        <div class="portfolio_inner_area">
            <div class="portfolio_filter">
                <ul>
                    <li data-filter="*" class="active"><a href=""> All</a></li>
                    <li data-filter=".photography"><a href="">ARCHITECTURE</a></li>
                    <li data-filter=".branding"><a href="">Building</a></li>
                    <li data-filter=".webdesign"><a href="">CONSTRUCTION</a></li>
                    <li data-filter=".adversting"><a href="">DESIGN</a></li>
                    <li data-filter=".painting"><a href="">Painting</a></li>
                </ul>
            </div>
            <div class="portfolio_item">
               <div class="grid-sizer"></div>
                <div class="single_facilities col-xs-4 p0 painting photography adversting">
                   <div class="single_facilities_inner">
                        <img src="https://i.ibb.co/6sJ72xx/sv-6.jpg" alt="">
                        <div class="gallery_hover">
                            <h4>Construction</h4>
                            <ul>
                                <li><a href="#"><i class="fa fa-link" aria-hidden="true"></i></a></li>
                                <li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="single_facilities col-xs-4 p0 webdesign">
                   <div class="single_facilities_inner">
                        <img src="https://i.ibb.co/ZVwt1mP/sv-1.jpg" alt="">
                        <div class="gallery_hover">
                            <h4>Construction</h4>
                            <ul>
                                <li><a href="#"><i class="fa fa-link" aria-hidden="true"></i></a></li>
                                <li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="single_facilities col-xs-4 painting p0 photography branding">
                   <div class="single_facilities_inner">
                        <img src="https://i.ibb.co/dDm9P1S/sv-2.jpg" alt="">
                        <div class="gallery_hover">
                            <h4>Construction</h4>
                            <ul>
                                <li><a href="#"><i class="fa fa-link" aria-hidden="true"></i></a></li>
                                <li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="single_facilities col-xs-4 p0 adversting webdesign adversting">
                   <div class="single_facilities_inner">
                        <img src="https://i.ibb.co/h165CJ0/sv-3.jpg" alt="">
                        <div class="gallery_hover">
                            <h4>Construction</h4>
                            <ul>
                                <li><a href="#"><i class="fa fa-link" aria-hidden="true"></i></a></li>
                                <li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="single_facilities col-xs-4 p0 painting adversting branding">
                   <div class="single_facilities_inner">
                        <img src="https://i.ibb.co/RcRkDRR/sv-4.jpg" alt="">
                        <div class="gallery_hover">
                            <h4>Construction</h4>
                            <ul>
                                <li><a href="#"><i class="fa fa-link" aria-hidden="true"></i></a></li>
                                <li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="single_facilities col-xs-4 p0 webdesign photography magazine adversting">
                   <div class="single_facilities_inner">
                        <img src="https://i.ibb.co/QHj581r/sv-5.jpg" alt="">
                        <div class="gallery_hover">
                            <h4>Construction</h4>
                            <ul>
                                <li><a href="#"><i class="fa fa-link" aria-hidden="true"></i></a></li>
                                <li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

и код изотопа JS: 

//* Isotope Js
function portfolio_isotope(){
    if ( $('.portfolio_item, .portfolio_2 .portfolio_filter ul li').length ){
        // Activate isotope in container
        $(".portfolio_item").imagesLoaded( function() {
            $(".portfolio_item").isotope({
                itemSelector: ".single_facilities",
                layoutMode: 'masonry',
                percentPosition:true,
                masonry: {
                    columnWidth: ".grid-sizer, .grid-sizer-2"
                }
            });
        });

        // Activate isotope in container
        $(".portfolio_2").imagesLoaded( function() {
            $(".portfolio_2").isotope({
                itemSelector: ".single_facilities",
                layoutMode: 'fitRows',
            });
        });
        // Add isotope click function
        $(".portfolio_filter ul li").on('click',function(){
            $(".portfolio_filter ul li").removeClass("active");
            $(this).addClass("active");

            var selector = $(this).attr("data-filter");
            $(".portfolio_item, .portfolio_2").isotope({
                filter: selector,
                animationOptions: {
                    duration: 450,
                    easing: "linear",
                    queue: false,
                }
            });
            return false;
        });
    }
};

Показывает автоматически все изображения при загрузке страницы. Поэтому я попытался прокомментировать эту строку:

<li data-filter="*" class="active"><a href=""> All</a></li>

Он удаляет его из меню, но по-прежнему показывает все изображения при загрузке страницы. Если я установлю class="active" для другой категории, она будет отмечена при загрузке страницы, но все равно покажет все изображения, и если я нажму на нее, то будут показаны только изображения для этой категории (но после щелчка).

Есть идеи, как это исправить?

JSFiddle

1 Ответ

0 голосов
/ 09 января 2019

хорошо, так что я понимаю, что вы ожидаете, что вы хотите удалить all опции из isotope

Сначала удалите 

<li data-filter="*" ><a href=""> All</a></li>

Во-вторых добавьте активный класс в первый 

 <li data-filter=".photography" class="active"><a href="">ARCHITECTURE</a></li>

и при инициализации изотопа вы можете добавить свойство фильтра в качестве фотографии. 

 $(".portfolio_item").isotope({
                    itemSelector: ".single_facilities",
                    layoutMode: 'masonry',
                    percentPosition:true,
                    filter: '.photography',
                    masonry: {
                        columnWidth: ".grid-sizer, .grid-sizer-2"
                    }
                });

проверить эту строку 

 filter: '.photography',

Проверить эту документацию Вы можете контролировать фильтр, вы можете легко отфильтровать его, применив к нему класс. 

$grid.isotope({ filter: '*' })

Демо

...