FancyBox iframe中的图片在移动设备上无法响应

我遇到了一些问题。我需要创建一个画廊，其中嵌入youtube-视频正常图像显示。要获取图像和视频之间的箭头，我必须使用iframe Modus。所以我结束了这一点：FancyBox 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有正确的大小）。如果我在笔记本电脑/台式机设备上缩小浏览器，图像会正确缩小。

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

感谢索尼克

来源

2013-08-20 Sonic750

图片不必使用iframe模式下，只有YouTube视频所以这个脚本应该两个工作：

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

然后设置类fancygal到所有链接AND特级fancybox.iframe只有像youtube videos links：

<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

来源

2013-08-20 23:57:24 JFK

谢谢，作品像魅力！我不知道，这样的.iframe类存在。 – Sonic750

@ Sonic750此外，您可以使用（HTML5）'data-fancybox-type =“iframe”'属性 – JFK

知道:)而不是“fancybox.iframe”类。 – Sonic750

FancyBox iframe中的图片在移动设备上无法响应

回答

相关问题