How to Override Default Title Handling in Magnific Popup with Custom HTML Content?

Question

I’m using Magnific Popup to create a gallery of images with custom titles that include HTML content, but I’m encountering an issue where the popup consistently uses the default title attribute’s value instead of my custom title. Despite trying to override this in the configuration, the default title still appears. I need to include dynamic links and additional text in the title bar of each popup.

Here’s the relevant part of my HTML structure for the gallery:

<a src="/img/2023-12-01-00263.jpg"
   title="Group of people staring at Northern Lights."
   data-year="2023"
   data-location="Sweden"
   data-client='<a href="https://example.com" target="_blank" rel="noopener noreferrer nofollow">Example Ltd</a>'>
</a>

And here’s my JavaScript for initializing Magnific Popup:

$(document).ready(function () {
  $(".gallery, .popup-gallery").magnificPopup({
    delegate: "a",
    type: "image",
    gallery: {
      enabled: true,
      navigateByImgClick: true,
      preload: [0, 1]
    },
    zoom: {
      enabled: true,
      duration: 300
    },
    callbacks: {
      afterChange: function () {
        var year = this.currItem.el.data("year");
        var location = this.currItem.el.data("location");
        var clientHtml = this.currItem.el.data("client");
        
        var titleHtml = '<p><small>' + year +
          '&nbsp;|&nbsp;' + clientHtml +
          '&nbsp;|&nbsp;' + location +
          '</small></p>';

        $('.mfp-title').html(titleHtml);
      }
    },
    image: {
      tError: '<div class="error-container"><i class="fa-solid fa-xl fa-triangle-exclamation"></i><br><br>Error</div>'
    }
  });
});

I have tried various configurations and methods to prevent the default title from being used, including setting titleSrc to an empty string and trying to reset item.title in elementParse, but the popup still shows the default title from the title attribute.

How can I effectively override the default title handling in Magnific Popup to use my custom HTML content instead?

Answer 1

You should include titleSrc function in the image config that dynamically generate and return your custom title.

$(document).ready(function () {
  $(".gallery, .popup-gallery").magnificPopup({
    delegate: "a",
    type: "image",
    gallery: {
      enabled: true,
      navigateByImgClick: true,
      preload: [0, 1]
    },
    zoom: {
      enabled: true,
      duration: 300
    },
    image: {
      tError: '<div class="error-container"><i class="fa-solid fa-xl fa-triangle-exclamation"></i><br><br>Error</div>',
      titleSrc: function(item) {
        var year = item.el.data('year');
        var location = item.el.data('location');
        var clientHtml = item.el.data('client');
        return '<p><small>' + year + '&nbsp;|&nbsp;' + clientHtml + '&nbsp;|&nbsp;' + location + '</small></p>';
      }
    }
  });
});