如何在Magnific Popup中用自定义HTML内容覆盖默认标题处理

使用Magnific Popup创建图片画廊时，弹窗始终显示默认的title属性值，无法替换为包含动态链接和额外文本的自定义HTML标题。即使尝试设置titleSrc为空、在elementParse中重置item.title等方法，默认标题依然存在。

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

初始化的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>'
    }
  });
});

解决方案 #

要完全覆盖默认标题，需从根源上阻止Magnific Popup读取默认title属性，同时自定义标题生成逻辑，具体实现如下：

1. 配置titleSrc自定义标题内容 #

在image配置项中添加titleSrc函数，直接返回拼接好的HTML标题。该配置项优先级高于元素的title属性，插件会直接使用此函数返回值作为标题：

image: {
  tError: '<div class="error-container"><i class="fa-solid fa-xl fa-triangle-exclamation"></i><br><br>Error</div>',
  titleSrc: function(item) {
    const year = item.el.data("year");
    const location = item.el.data("location");
    const clientHtml = item.el.data("client");
    return `<p><small>${year}&nbsp;|&nbsp;${clientHtml}&nbsp;|&nbsp;${location}</small></p>`;
  }
}

2. 移除afterChange中的DOM操作 #

由于titleSrc已直接生成标题内容，无需再在afterChange中手动修改.mfp-title的HTML，避免重复操作或时序冲突。

3. 可选：清除原生title属性 #

若担心浏览器默认文字提示干扰，可在elementParse回调中移除元素的title属性：

callbacks: {
  elementParse: function(item) {
    item.el.removeAttr('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
    },
    callbacks: {
      elementParse: function(item) {
        // 移除原生title属性，消除浏览器默认提示
        item.el.removeAttr('title');
      }
    },
    image: {
      tError: '<div class="error-container"><i class="fa-solid fa-xl fa-triangle-exclamation"></i><br><br>Error</div>',
      titleSrc: function(item) {
        const year = item.el.data("year");
        const location = item.el.data("location");
        const clientHtml = item.el.data("client");
        return `<p><small>${year}&nbsp;|&nbsp;${clientHtml}&nbsp;|&nbsp;${location}</small></p>`;
      }
    }
  });
});

原理说明 #

• titleSrc是Magnific Popup专为图片标题定制的配置项，返回的HTML会直接渲染到标题区域，完全替代默认的title属性读取逻辑。
• elementParse回调在解析每个弹窗元素时触发，此时移除title属性可避免浏览器显示原生文字提示。
• 这种方式利用插件自身配置逻辑实现自定义标题，避免了手动DOM操作可能带来的时序问题（比如插件默认标题在回调后再次覆盖自定义内容）。

内容的提问来源于stack exchange，提问作者sofies