Home / Questions / 484155
Accepted
Oscar Rodriguez
Asked: 2022-09-15 02:04:20 +0800 CST 2022-09-15 02:04:20 +0800 CST

Bootstrap gallery with Magnific Popup and isotope filter, can't insert text

  • 772

I have my gallery working correctly, only I can't find a way to display text when opening the image with popup, I'll leave you the simplified code and I'll show you examples of how it looks, let's see if you know how I can add text.

$('.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>

The result is correct, only I have not found a way to insert text when opening the image, only outside.

text outside the image

enter image description here

try to insert text in the part that highlights in red or even on the side, the idea is to put text in each image, but it does not succeed, even try to add a ref to an external html creating perhaps an extra code to display the image with text but it didn't work, also look for the syntax like Fancybox, from data-caption but it doesn't work since only magnific-popup is being used, in fact note that I didn't remove the one from fancybox xD

Thank you very much in advance.

html

1 Answers

  1. Best Answer

    You can solve it by using a function on an image attribute:

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

    If you want more in-depth information, I did an article about it.

    • 0