0

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.

1 respuesta 1

0

Puedes resolverlo mediante una función en un atributo image:

popup_btn.magnificPopup({
  image: {
      titleSrc: function(item) {
        // insertar función acá
      }
  }
  .
  .
  .
}

Si deseas información más a profundidad, hice un artículo al respecto.

2
  • Gracias Ruslan López, si funciono! Me di cuenta que se puede utilizar cualquier atributo que hagamos, funciona de igual manera, creo que es la única manera, sin embargo no se le pueda dar mucho formato dentro de la misma imagen, intentare investigar, Muchas gracias! eres un crack! Commented el 14 sept. 2021 a las 23:06
  • pues deberíar hacer otra pregunta para agregarle formato por ejemplo con html, tal vez alguien sepa como hacerlo Commented el 14 sept. 2021 a las 23:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.