iframe 中的 FancyBox 图像在移动设备上没有响应

Posted 2023-05-09

【中文标题】iframe 中的 FancyBox 图像在移动设备上没有响应

【英文标题】：FancyBox Images in iframe are not responsive on mobile devices

【发布时间】：2013-08-22 11:13:26

【问题描述】：

我有一个小问题。我需要创建一个画廊， 在哪里嵌入 youtube-videos 一个普通的图像 显示。为了让箭头在图像和视频之间工作， 我必须使用 iframe 模式。所以我最终得到了这个：

<a href="url_of_embed_yt_vid" class="fancygal" rel="group"><img src="preview_for_vid"></a>
<a class="fancygal" rel="group" href="link_to_image"><img src="myimage"></a>


$('.fancygal').fancybox(
        'type'  : 'iframe',
        'scrolling' : 'no',
        'fitToView': true,
        'iframe' : 
                    'scrolling' : 'no',
                    'preload'   : false
                                  
);

它完美地工作，除了在移动设备上，图像不会按比例缩小以适合fancybox（fancybox 具有正确的大小）。 如果我在笔记本电脑/台式设备上缩小浏览器，图像会正确缩小。

有没有人知道，可能是什么问题？

谢谢 索尼克

【参考方案1】：

图像不必使用iframe 模式，只有 youtube 视频，所以这个脚本应该适用于两者：

$(".fancygal").fancybox(
    // 'type'  : 'iframe', //no needed
    scrolling: 'no',
    fitToView: true,
    iframe: 
        scrolling: 'no',
        preload: false
    
);

然后将 fancygal 类设置为 all 链接，并将特殊类 fancybox.iframe 设置为 youtube 视频链接，例如：

<a class="fancygal fancybox.iframe" rel="group" href="link to youtube 1">youtube one</a>
<a class="fancygal fancybox.iframe" rel="group" href="link to youtube 2">youtube two</a>
<a class="fancygal" rel="group" href="link to image 1">image one</a>
<a class="fancygal" rel="group" href="link to image 3">image two</a>
... etc.

见JSFIDDLE

【讨论】：

谢谢，就像一个魅力！我不知道存在这样的 .iframe 类。

@Sonic750 另外，您可以使用 (html5) data-fancybox-type="iframe" 属性来代替 fancybox.iframe 类