Fancybox 3技术问询：图片画廊中能否嵌入带外部链接的HTML？

当然可以实现！我之前也折腾过类似的需求，Fancybox 3其实支持在画廊里混合图片和自定义HTML内容，包括带外部链接的元素，只是得用正确的配置方式，我给你拆解两种可行的方法：

方法1：通过JS数组定义混合画廊项 #

你可以直接在Fancybox的配置里，把画廊的items数组同时包含图片项和HTML项，给HTML项指定type: 'html'，然后在content里编写带外部链接的代码：

$('[data-fancybox="gallery"]').fancybox({
  loop: true,
  items: [
    // 普通图片项
    {
      src: 'path/to/your-image-1.jpg',
      type: 'image',
      caption: '第一张图片'
    },
    // 带外部链接的HTML项
    {
      type: 'html',
      content: '<div style="padding: 2rem; text-align:center;"><h3>自定义内容区块</h3><p>点击下方链接跳转：</p><a href="https://example.com" target="_blank" style="color: #2196F3; font-size:1.2rem;">访问外部网站</a></div>',
      caption: '带链接的自定义内容'
    },
    // 另一张图片项
    {
      src: 'path/to/your-image-2.jpg',
      type: 'image',
      caption: '第二张图片'
    }
  ]
});

这里建议给外部链接加上target="_blank"，避免在Fancybox弹窗内打开外部网站（如果需要在弹窗内打开可以去掉这个属性）。

方法2：通过页面元素触发混合画廊 #

如果不想写JS数组，也可以在页面里混合图片链接和隐藏的HTML容器，用同一个data-fancybox属性关联成画廊：

<!-- 图片触发按钮 -->
<a data-fancybox="gallery" href="path/to/your-image-1.jpg" data-caption="第一张图片">
  <img src="path/to/thumb-1.jpg" alt="缩略图1">
</a>

<!-- 隐藏的HTML内容容器 -->
<div style="display:none;" data-fancybox="gallery" data-type="html" data-caption="带链接的自定义内容">
  <div style="padding: 2rem; text-align:center;">
    <h3>自定义内容区块</h3>
    <p>点击跳转：</p>
    <a href="https://example.com" target="_blank">外部网站链接</a>
  </div>
</div>

<!-- 另一张图片触发按钮 -->
<a data-fancybox="gallery" href="path/to/your-image-2.jpg" data-caption="第二张图片">
  <img src="path/to/thumb-2.jpg" alt="缩略图2">
</a>

之后只需要简单初始化Fancybox即可：

$('[data-fancybox="gallery"]').fancybox();

几个注意点 #

• 尽量使用最新版本的Fancybox 3，旧版本可能对HTML内容的支持存在bug；
• 如果链接点击没反应，检查是否有其他JS代码阻止了<a>标签的默认跳转行为，Fancybox默认不会拦截普通链接的跳转；
• 自定义HTML的样式可以自己调整，也可以给容器加自定义CSS类来统一弹窗内的样式。

内容的提问来源于stack exchange，提问作者Bento de Espinosa