Home / Questions / 487063
Accepted
Oscar Rodriguez
Asked: 2022-09-28 18:43:51 +0800 CST 2022-09-28 18:43:51 +0800 CST

Bootstrap gallery filtered by isotope, how to select main filter

  • 772

I have my gallery fully functional, but when I load it for the first time (or reload it) all the images appear (without filters), I can't find a way to always load a section or filter before choosing any other filter.

How can I leave a specific filter to be displayed before choosing any other filter for the first time?

I leave the code to see if you can help me.

 

    $('.portfolio-menu ul li').click(function(){
        $('.portfolio-menu ul li').removeClass('active');
        $(this).addClass('active');
        
        
        var selector = $(this).attr('data-filter');
        $('.portfolio-item').isotope({
            filter:selector
           
        });
        return  false;
    });

    $().ready(function() {
    var popup_btn = $('.popup-btn');
    popup_btn.magnificPopup({
    type : 'image',
    gallery : {
        enabled: true,
},
image: {
  titleSrc: function(item) {
    return item.el.find('img').attr('alt');
  }
}
});
});
   

 .portfolio-menu{
    text-align:center;

  }
  .portfolio-menu ul li{
    display:inline-block;
    margin:0;
    list-style: none;
    padding:10px 15px;
    cursor: pointer;
    -webkit-transition:all 05s ease;
    -moz-transition:all 05s ease;
    -ms-transition:all 05s ease;
    -o-transition:all 05s ease;
    transition:all .5s ease;
  }
  
  .portfolio-item{
    /*width:100%;*/
  }
  .portfolio-item .item{
    /*width:303px;*/
    float:left;
    margin-bottom:10px;
  }

.imagebox img {
    opacity: 1;
    transition: 0.5s opacity;
  }

.imagebox:hover img {
    opacity: 0.7;
  }
   

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>

    <div class="container">
      <div class="row">

      </div>
      <div class="portfolio-menu mt-2 mb-4">
        <ul>
          <li class="btn btn-outline-dark" style="margin: 2px;" data-filter=".bolsa">Bolsa</li>
            <li class="btn btn-outline-dark" style="margin: 2px;" data-filter=".esp">Especialidades</li>
        </ul>
      </div>
      <div class="portfolio-item row">
        <div class="item bolsa col-lg-3 col-md-4 col-6 col-sm">
            <div class="imagebox">
            <a href="https://i.ibb.co/xMW2WSB/bolsa-negra-para-basura.jpg" class="popup-btn">
              <img class="img-fluid" src="https://i.ibb.co/xMW2WSB/bolsa-negra-para-basura.jpg"
                alt="Bolsa negra para basura">
            </a>
            <p class="text-center">Bolsa negra para basura</p>
          </div>
          </div>
<div class="item esp col-lg-3 col-md-4 col-6 col-sm">
            <div class="imagebox">
            <a href="https://i.ibb.co/hYrfXXw/bolsa-anti-corrosiva.jpg" class="popup-btn">
              <img class="img-fluid" src="https://i.ibb.co/hYrfXXw/bolsa-anti-corrosiva.jpg"
                alt="Bolsa anticorrosiva">
            </a>
            <p class="text-center">Bolsa anticorrosiva</p>
          </div>
        </div>

If I load the index again or reload the page, all the images continue to appear until I select a section.

enter image description here

The idea is that nothing comes out or only a specific section comes out.

Thank you very much in advance.

bootstrap-4

1 Answers

  1. Best Answer

    I already found how to remove the gallery or the main category so that it only appears when a category is selected in the menu.

    Just add "d-none" in the gallery div classes and then add that class to be removed when clicking on a category from JS, it would look like this.

     <div class="portfolio-item row d-none">

    in JS:

    $('.portfolio-item').removeClass('d-none');

    It works fine so far, I still can't find how to display a "Data-filter" from the beginning.

    • 1