如何在Fancybox中为iframe添加Panzoom平移缩放功能？

Fancybox 默认不支持对 iframe 内容直接启用 Panzoom 功能，你参照图片配置添加的Iframes.Panzoom无效，因为Panzoom组件是专门为图片类型内容设计的，并未适配iframe场景。

原因说明 #

Panzoom功能依赖于对图片元素的DOM操作、变换计算等逻辑，而iframe是独立的文档容器，出于安全限制和技术实现差异，Fancybox没有内置对iframe内容的Panzoom支持。

解决方案 #

方案1：自定义实现iframe平移缩放

通过手动添加事件监听和CSS变换，模拟Panzoom效果，示例代码如下：

<a href="https://fancyapps.com/iframe.html" data-type="iframe" data-fancybox="gallery" data-caption="Caption #1">
        <img src="https://lipsum.app/id/1/200x150" />
</a>

<a href="https://lipsum.app/id/2/800x600" data-fancybox="gallery" data-caption="Caption #2">
        <img src="https://lipsum.app/id/2/200x150" />
</a>

<script>
    Fancybox.bind("[data-fancybox]", {
        Images: {
            Panzoom: {
                maxScale: 2,
            },
        },
        onShow: (fancybox, slide) => {
            if (slide.type !== 'iframe') return;
            
            const container = slide.container.querySelector('.fancybox-content');
            let scale = 1;
            let posX = 0;
            let posY = 0;
            let isDragging = false;
            let startX, startY;

            // 滚轮缩放
            container.addEventListener('wheel', (e) => {
                e.preventDefault();
                const delta = e.deltaY > 0 ? 0.9 : 1.1;
                scale = Math.max(1, Math.min(2, scale * delta));
                updateTransform();
            });

            // 鼠标拖拽平移
            container.addEventListener('mousedown', (e) => {
                isDragging = true;
                startX = e.clientX - posX;
                startY = e.clientY - posY;
                container.style.cursor = 'grabbing';
            });

            document.addEventListener('mousemove', (e) => {
                if (!isDragging) return;
                posX = e.clientX - startX;
                posY = e.clientY - startY;
                updateTransform();
            });

            document.addEventListener('mouseup', () => {
                isDragging = false;
                container.style.cursor = 'grab';
            });

            function updateTransform() {
                container.style.transform = `translate(${posX}px, ${posY}px) scale(${scale})`;
                container.style.transformOrigin = '0 0';
            }

            // 初始化样式
            container.style.cursor = 'grab';
            container.style.transition = 'transform 0.1s ease';
        }
    });
</script>

方案2：替换为图片（若场景允许）

如果iframe内是静态内容，可将其转换为图片格式，直接使用Fancybox内置的图片Panzoom功能，无需额外开发。

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