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中的圖片在移動設備上無法響應

回答

相關問題