How to edit / remove `show all` view in isotope library?

Question

There are two others topics about this, but they don't help me.

I have this 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>

and JS isotope code:

//* 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;
        });
    }
};

It shows automatically all images when page is loaded. So i tried to comment this row:

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

It delete it from menu, but still shows all images on page load. If I set class="active" on another category it is marked on page load, but still shows all images and if I click on it, then it shows only images for that category (but after click).

Any ideas, how to fix this?

JSFiddle

Answer 1

ok so I understand what you are expecting you want to remove all options from the isotope

First remove

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

secondly add active class to first one

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

and when initializing isotope you can add fileter property as the photography.

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

check this line

 filter: '.photography',

Check this documentation, you can have a control over the filter, you can easily filter out by applying the class over it.

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

Demo