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.
$('.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>
El Resultado es correcto, solo que no he encontrado la forma de insertar texto al abrir la imagen, solo fuera de.
intente insertar texto en la parte que remarque en rojo o ya sea aun lado, la idea es meter texto en cada imagen, pero no lo logre, incluso intente agregar una ref a un html externo creando así quizás un código extra para mostrar la imagen con texto pero no funciono, tambien busque la sintaxis como Fancybox, de data-caption pero no funciona dado que solo se esta usando magnific-popup, de hecho note que no quite el de fancybox xD
Muchas gracias de antemano.