Magnific Popup图片画廊计数器HTML标签显示为纯文本问题

问题根源 #

你当前配置中tCounter的值使用了转义的HTML实体（<和>），Magnific Popup会将这些实体字符直接当作纯文本输出，不会解析为HTML元素，所以才会看到完整的标签文本。

修复步骤 #

将转义的实体替换为真实的HTML标签即可，以下是修正后的完整配置：

$(".open-popup").magnificPopup({
    type: "image",
    fixedContentPos: true,
    gallery: {
        enabled: true,
        tCounter: '<span class="mfp-counter">%curr% of %total%</span>'
    },
});

简化写法（可选） #

其实Magnific Popup默认已经提供了.mfp-counter容器，如果你不需要额外自定义标签结构，直接写计数器的文本模板即可，插件会自动把内容注入到默认容器里：

gallery: {
    enabled: true,
    tCounter: '%curr% of %total%'
}

这样修改后，计数器就能正常渲染成HTML元素，不会再显示纯文本标签了。

内容的提问来源于stack exchange，提问作者Swaranan Singha Barman