Fancybox Scaling Issues in Mobile Devices With Low

Question

Problem Description:

I am using Fancybox v2.1.5 in a responsive page design. The problem I have is with smaller mobile devices that are more rectangular than square.

When the device is in portrait orientation and I call Fancybox, it displays to the width of the screen and the title text wraps below the image. This is not an issue as there is usually a lot of extra screen real estate in portrait mode.

When I change the device to landscape orientation however, Fancybox shrinks its height in response to the shorter screen height.

The width obviously shrinks proportionally as well. As the title box width is also controlled by the width of the Fancybox container, which adjusts to the image width, it means that the text wraps even more and usually causes the image to shrink more as it gets resized smaller to accommodate the space needed for the title text wrapping.

I have unsuccessfully tried playing around with the Fancybox CSS and media queries but reading other posts here suggests you need javascript functionality to effectively do this and while I am pretty solid with html and CSS, I am still fairly shaky with javascript.

Desired Functionality:

I'd like to be able to be able to test for "short" screen heights and format the Fancybox title to give as much real estate to the image, as possible.

Ideally this would be by being above to control Fancybox Title font size and allow the titlebox to extend out past the container boundaries.

Any help in the form of coding suggestions or pointing me to other posts that I amy have missed would be greatly appreciated.

Answer 1

You could make fancybox horizontally responsive only so it will extend its height as needed regardless the screen size. This way images won't shrink (including their title) to fit in the viewport's height (although you may need to scroll down to see the rest of a larger image and its title)

If this alternative suits your needs, you need to combine a set of fancybox's API options in your custom initialization script like :

jQuery(document).ready(function ($) {
    $('.fancybox').fancybox({
        fitToView: false, // won't shrink to fit in the viewport
        maxWidth: "90%", // need to explain?
        helpers: {
            title: {
                type: "inside" // can fit larger title/captions
            }
        },
        beforeLoad: function () {
            // optional:
            // get a large title from a data attribute
            this.title = $(this.element).data("caption");
        }
    });
}); // ready

Regarding styling the title, you can always add an extra CSS rule (after loading the fancybox CSS file) to set your preferred styles like :

.fancybox-title {
    font-family: verdana, sans-serif;
    font-size: 11px;
    font-style: italic;
    color: #008000;
}

See JSFIDDLE