HTML
<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>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<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="*">Todos</li>
<li class="btn btn-outline-dark" style="margin: 2px;" data-filter=".bolsa">Bolsa</li>
</ul>
</div>
<div class="portfolio-item row">
<div class="item bolsa col-lg-3 col-md-4 col-6 col-sm">
<a href="/img/productos/Bolsa/bolsa_negra_para_basura.png" class="fancylight popup-btn" data-fancybox-group="light">
<img class="img-fluid" src="/img/productos/Bolsa/bolsa_negra_para_basura.png" alt="Bolsa negra para basura">
</a>
<p class="text-center">Bolsa negra para basura</p>
</div>
CSS
.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 .item{
float:left;
margin-bottom:10px;
}
JS
$('.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;
});
$(document).ready(function() {
var popup_btn = $('.popup-btn');
popup_btn.magnificPopup({
type: 'image',
gallery: {
enabled: true
}
});
});
.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 .item {
float: left;
margin-bottom: 10px;
}
<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="*">Todos</li>
<li class="btn btn-outline-dark" style="margin: 2px;" data-filter=".bolsa">Bolsa</li>
</ul>
</div>
<div class="portfolio-item row">
<div class="item bolsa col-lg-3 col-md-4 col-6 col-sm">
<a href="https://povasa.com.mx/wp-content/uploads/2019/09/producto-tres.jpg" class="fancylight popup-btn" data-fancybox-group="light">
<img class="img-fluid" src="https://povasa.com.mx/wp-content/uploads/2019/09/producto-tres.jpg" alt="Bolsa negra para basura">
</a>
<p class="text-center">Bolsa negra para basura</p>
</div>
$('.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;
});
$(document).ready(function() {
var popup_btn = $('.popup-btn');
popup_btn.magnificPopup({
type : 'image',
gallery : {
enabled : true
}
});
});