Question

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

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

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

由于音速

Answer 1

图片不必使用iframe模式，只需使用YouTube视频，因此此脚本应该同时适用于：

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

然后将课程fancygal设置为所有链接，将特殊课程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中的FancyBox图像对移动设备无响应

1 个答案: