FancyBox Images in iframe are not responsive on mobile devices

问题

I have a little problem. I need to create a gallery, where embed youtube-videos an normal images are shown. To get the arrows working between images and the video, I have to use the iframe Modus. So I ended up with this:

<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
                }                  
});

It works perfectly, besides that on mobile devices the images are not scaled down to fit in the fancybox (the fancybox has the right size). If I scale down my browser on laptop/desktop devices, the images scale down correctly.

Does anyone have an idea, what may be the problem?

Thanks Sonic

回答1:

Images doesn't have to use iframe mode, only the youtube videos so this script should work for both :

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

then set the class fancygal to all links AND the special class fancybox.iframe to youtube videos links only like :

<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.

See JSFIDDLE

来源：https://stackoverflow.com/questions/18334431/fancybox-images-in-iframe-are-not-responsive-on-mobile-devices