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.
The idea is that nothing comes out or only a specific section comes out.
Thank you very much in advance.
