如何使用自定义 HTML 内容覆盖放大弹出窗口中的默认标题处理？

Question

我正在使用 Magnific Popup 创建带有包含 HTML 内容的自定义标题的图像库，但我遇到了一个问题，即弹出窗口始终使用默认标题属性的值而不是我的自定义标题。尽管尝试在配置中覆盖此设置，但默认标题仍然出现。我需要在每个弹出窗口的标题栏中包含动态链接和附加文本。

这是我的画廊 HTML 结构的相关部分：

<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>

这是我用于初始化 Magnific Popup 的 JavaScript：

$(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>'
    }
  });
});

我尝试了各种配置和方法来防止使用默认标题，包括将 titleSrc 设置为空字符串并尝试重置 elementParse 中的 item.title，但弹出窗口仍然显示 title 属性中的默认标题。

如何有效地覆盖 Magnific Popup 中的默认标题处理以使用我的自定义 HTML 内容？

Answer 1

您应该在图像配置中包含

titleSrc

函数来动态生成并返回您的自定义标题。

$(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>';
      }
    }
  });
});