【问题标题】:FancyBox Images in iframe are not responsive on mobile devicesiframe 中的 FancyBox 图像在移动设备上没有响应
【发布时间】:2013-08-22 11:13:26
【问题描述】:

我有一个小问题。我需要创建一个画廊, 在哪里嵌入 youtube-videos 一个普通的图像 显示。为了让箭头在图像和视频之间工作, 我必须使用 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 具有正确的大小)。 如果我在笔记本电脑/台式设备上缩小浏览器,图像会正确缩小。

有没有人知道,可能是什么问题?

谢谢 索尼克

【问题讨论】:

    标签: jquery image iframe fancybox fancybox-2


    【解决方案1】:

    图像不必使用iframe 模式,只有 youtube 视频,所以这个脚本应该适用于两者:

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

    然后将 fancygal 类设置为 all 链接,并将特殊类 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 类。
    • @Sonic750 另外,您可以使用 (HTML5) data-fancybox-type="iframe" 属性来代替 fancybox.iframe
    猜你喜欢
    • 2017-10-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-09-16
    • 1970-01-01
    • 2014-04-24
    • 1970-01-01
    • 2023-03-12
    相关资源
    最近更新 更多