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

Naashom

Not downvoter, but you need to explain more about your expected output. and can you please try to create snippet? – Sputum

@Justcode You are right, question was edited + jsFiddle :) – Naashom

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

Sputum

Simple as f.. Thank you! Next time I will create demo, and probably will get answer without bounty :) – Naashom