iframe中的FancyBox图像对移动设备无响应 [英] FancyBox Images in iframe are not responsive on mobile devices

问题描述

我有点问题。我需要创建一个图库，
嵌入youtube-videos，显示正常图像
。为了让箭头在图像和视频之间工作，
我必须使用iframe Modus。所以我最终得到了这个：

I have a little problem. I need to create a gallery, where embed youtube-videos an normal images are shown. To get the arrows working between images and the video, I have to use the iframe Modus. So I ended up with this:

<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有合适的尺寸）。
如果我在笔记本电脑/台式机设备上缩小我的浏览器，图像会正确缩小。

It works perfectly, besides that on mobile devices the images are not scaled down to fit in the fancybox (the fancybox has the right size). If I scale down my browser on laptop/desktop devices, the images scale down correctly.

有没有人有想法，可能是什么问题？

Does anyone have an idea, what may be the problem?

谢谢
Sonic

Thanks Sonic

推荐答案

图片没有使用 iframe 模式，只有youtube视频，所以这个脚本应该同时适用于：

Images doesn't have to use iframe mode, only the youtube videos so this script should work for both :

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

然后将类 fancygal 设置为所有链接和特殊类 fancybox.iframe 到youtube视频链接仅限于：

then set the class fancygal to all links AND the special class fancybox.iframe to youtube videos links only like :

<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

See JSFIDDLE

这篇关于iframe中的FancyBox图像对移动设备无响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！