Skip to main content
5 de 5
Correción de etiquetas
Ruslan López
  • 11.8k
  • 14
  • 44
  • 88

Galeria bootstrap con Magnific Popup y filtro isotope, no puedo insertar texto

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.

texto fuera de la imagen

introducir la descripción de la imagen aquí

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.