tengo mi galería funcionando correctamente, solo que no encuentro la manera de visualizar texto al momento de abrir la imagen con popup, les dejo el código simplificado y les muestro ejemplos de como queda, a ver si ustedes saben como puedo agregar texto.
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
}
});
});
El Resultado es correcto, solo que no he encontrado la forma de insertar texto al abrir la imagen, solo fuera de.
Yo deseo mostrar texto en la parte que remarque en rojo o ya sea aun lado, la idea es meter texto en cada imagen...
Muchas gracias de antemano.