如何自定义触发Fancybox（Fancyapp）幻灯片缩放切换功能？

我需要创建一个按钮 <button id="zoomNext">Zoom</button>，实现切换到下一张幻灯片并自动缩放的功能，但按钮点击事件内的代码始终无法正常运行。

我的代码结构 #

<div class="gallery"><a href="someimage.jpg" data-fancybox="gallery"><img src="someimage.jpg"></a></div>
<div class="gallery"><a href="someimage.jpg" data-fancybox="gallery"><img src="someimage.jpg"></a></div>
<div class="gallery"><a href="someimage.jpg" data-fancybox="gallery"><img src="someimage.jpg"></a></div>
<div class="gallery"><a href="someimage.jpg" data-fancybox="gallery"><img src="someimage.jpg"></a></div>
<div class="gallery"><a href="someimage.jpg" data-fancybox="gallery"><img src="someimage.jpg"></a></div>
<div class="gallery"><a href="someimage.jpg" data-fancybox="gallery"><img src="someimage.jpg"></a></div>
<div class="gallery"><a href="someimage.jpg" data-fancybox="gallery"><img src="someimage.jpg"></a></div>

<button id="zoomNext">Zoom next slide than is active now</button>

$(document).ready(function() {
   
   // 画廊绑定正常工作
   Fancybox.bind(".gallery", {
        wheel: 'slide',
    });
    
    // 尝试添加的功能无法生效
    $('#zoomNext').click(function(){
       
       Fancybox.getSlide()?.panzoom.zoomIn(); // 静态方法调用失败

       const fancybox = Fancybox.getInstance(); // 获取实例失败
       fancybox.next(); // 切换方法调用失败

    });
})

问题原因与解决方案 #

原代码的核心问题在于：

1. 错误调用静态方法：Fancybox.getSlide() 不是静态方法，无法直接通过类调用，必须先获取Fancybox实例再操作幻灯片。
2. 未处理异步切换：调用next()后立即缩放，此时新幻灯片可能还未加载完成，panzoom对象尚未初始化。
3. 未做实例存在性判断：如果Fancybox未打开，getInstance()会返回null，直接调用方法会抛出错误。

修正后的代码如下：

$(document).ready(function() {
    Fancybox.bind(".gallery", {
        wheel: 'slide',
    });
    
    $('#zoomNext').click(function(){
        // 获取当前Fancybox实例
        const fancybox = Fancybox.getInstance();
        
        // 检查实例是否存在且处于打开状态
        if (!fancybox || !fancybox.isOpened()) {
            return;
        }

        // 切换到下一张幻灯片，等待切换完成后执行缩放
        fancybox.next().then(() => {
            // 获取当前激活的幻灯片
            const currentSlide = fancybox.getCurrentSlide();
            // 检查panzoom对象是否存在，执行缩放
            if (currentSlide?.panzoom) {
                currentSlide.panzoom.zoomIn();
            }
        });
    });
})

关键说明 #

• Fancybox.getInstance()：仅当Fancybox处于打开状态时才会返回有效实例，否则返回null，因此必须先做判断。
• fancybox.next()：返回一个Promise，幻灯片切换完成后会触发then回调，此时新幻灯片的panzoom对象已初始化，可以安全调用缩放方法。
• fancybox.getCurrentSlide()：通过实例获取当前激活的幻灯片，再访问其panzoom对象执行zoomIn()方法。

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