0

我有一个小问题。我需要创建一个画廊，其中嵌入 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 具有正确的大小）。如果我在笔记本电脑/台式机设备上缩小浏览器，图像会正确缩小。

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

谢谢索尼克

4

1 回答 1

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

于 2013-08-20T23:57:24.457 回答