Fancybox with size to viewport but also with maximum width

Question

I use Fancybox2 (fancybox.net) on my website. When the ligthbox is shown I want it to size according to the screen width of the browser, so it's good to view on both mobile and desktop. However, on the desktop I want the box to have a maximum width of 500px.

I was looking for a max-width option, but I can't find on http://fancybox.net/api how to do this.

Answer 1

Anything related to fancybox v1.x (v1.3.4 the latest) you can find it at fancybox.net. On the other hand, anything related to fancybox v2.x (v2.1.5 so far) you can find it at fancyapps.com/fancybox

Notice that API options for v1.x and v2.x are incompatible with each other. BTW, maxWidth is an option for fancybox v2.x that doesn't exist in v1.x (therefore you won't find it at fancybox.net)

To avoid potential errors, set your fancybox initialization inside the .ready() method as in your code like :

// <![CDATA[
/* when document is ready */
$(function () { /* initiate the plugin */
    $("div.holder").jPages({
        containerID: "itemContainer",
        perPage: 4,
        startPage: 1,
        previous: "Vorige",
        next: "Volgende",
        startRange: 1,
        midRange: 5,
        endRange: 1
    });
    $(".fancybox").fancybox({
        maxWidth: 500,
        openEffect: 'none',
        closeEffect: 'none',
        nextEffect: 'none',
        prevEffect: 'none',
        nextSpeed: 0,
        prevSpeed: 0,
        preload: 3,
        padding: 15
    });
});
// ]]>