如何在fancybox3放大的图片下方添加按钮或图片？

嘿，刚好我对Fancybox3比较熟悉，来给你捋捋怎么实现这个需求：

首先明确说：Fancybox3没有直接内置这个底部按钮栏的选项，但完全不需要修改源码！ 用它提供的回调函数+自定义HTML/CSS就能轻松搞定，而且灵活度很高。

核心思路 #

利用Fancybox的afterShow回调（弹窗显示完成后触发），在图片容器的底部插入自定义的按钮区域；再用beforeClose回调清理元素，避免重复添加。

具体实现步骤 #

1. 初始化Fancybox时配置回调
   给你的Fancybox实例加上回调函数，插入按钮并绑定事件：

   $('[data-fancybox="gallery"]').fancybox({
     // 保留你原有的配置项...
     afterShow: function(instance, current) {
       // 自定义底部按钮的HTML结构，按需调整按钮数量和内容
       const customFooter = `
         <div class="fancybox-custom-footer">
           <button class="fancy-btn btn-download">下载图片</button>
           <button class="fancy-btn btn-share">分享</button>
           <!-- 可根据需求添加更多按钮 -->
         </div>
       `;
       
       // 把按钮栏插入到弹窗内容区域的底部
       $('.fancybox-inner').append(customFooter);
       
       // 给按钮绑定具体功能
       $('.btn-download').on('click', () => {
         // 示例：打开图片新窗口让用户保存
         window.open(current.src, '_blank');
       });
       
       $('.btn-share').on('click', () => {
         // 示例：这里可以集成分享API或自定义分享逻辑
         alert('可在此处实现自定义分享功能');
       });
     },
     beforeClose: function() {
       // 关闭弹窗前移除自定义按钮，避免下次弹窗重复渲染
       $('.fancybox-custom-footer').remove();
     }
   });
   

2. 添加CSS样式美化按钮栏
   写点样式让按钮栏匹配你的预期效果：

   .fancybox-custom-footer {
     padding: 12px 20px;
     background-color: #f8f8f8;
     border-top: 1px solid #eee;
     display: flex;
     gap: 15px;
     justify-content: center;
     margin-top: 10px;
   }
   
   .fancy-btn {
     padding: 8px 18px;
     border: none;
     border-radius: 4px;
     background-color: #333;
     color: #fff;
     cursor: pointer;
     transition: background-color 0.2s;
   }
   
   .fancy-btn:hover {
     background-color: #555;
   }
   

为什么不用修改源码？ #

Fancybox3设计时就考虑了扩展性，回调函数就是用来让开发者自定义弹窗行为的。直接修改源码的话，后续升级Fancybox版本会丢失自定义内容，用外部回调的方式更安全也更易维护。

如果你的需求更复杂（比如按钮要和Fancybox内置工具栏交互），还可以利用它的toolbar配置扩展，但你要的是图片下方的按钮栏，上面的方案完全够用啦。

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