fancyBox: Scale Issue on Device / Orientation Rotate

Question

When using fancyBox, whether its an image or an iFrame (YouTube), and open this on a mobile device and then rotate (landscape to portrait or vice versa), fancyBox doesn't scale or fit to width of device window?

fancyBox Options:

    $(document).ready(function() {
        $(".fancybox").fancybox({
            helpers : {
                media: true,
                title: null

                },
            width       : 800,
            height      : 450,
            aspectRatio : true,
            scrolling   : 'no',
            openEffect  : 'fade',
            closeEffect : 'fade'
        });
    });

Device: SAM GALXY S3 OS: ANDROID 4.2 Browser: FF / CHRME / DOLPHIN

fancyBox version: 2.1.5 PACK

p.s. this is happening also on the examples, both versions 2 and beta! :/

skrawler skrawler · Accepted Answer · 2015-02-18T17:01:26

Your code appears to be setting a static width and height value for your fancy box. That's not a bad thing to do, but it does explain why your fancybox is not fitting the device screen: mobile devices tend to be less than 800px in width.

To fix this, you can easily use css styles to set max-widths for fancybox classes "fancybox-wrap" and "fancybox-inner".

Example:

.fancybox-wrap{max-width: 95%!important;}
.fancybox-inner {max-width: 100%!important;}

These rules use !important because they need to be able to overwrite the html width/height set by the fancybox options.

You can easily set the same styles using a jquery function to set css styles in fancybox's afterLoad option (though there may be more efficient methods to use than afterLoad, it should still get the job done.)

fancyBox: Scale Issue on Device / Orientation Rotate

1 Answers