Fancybox sized to viewport, but also with maximum width

Question

I am using Fancybox2 (fancybox.net) on my website. When ligthbox is displayed, I want it to change according to the width of the browser screen, so it is clearly visible on both the mobile and the desktop. However, on the desktop, I want the drawer to have a maximum width of 500 pixels.

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

Answer 1

Everything related to fancybox v1.x (the latest v1.3.4) can be found at fancybox.net . On the other hand, everything related to fancybox v2.x (v2.1.5 so far) can be found at fancyapps.com/fancybox

Please note that the API parameters for v1.x and v2.x are not compatible with each other. BTW, maxWidthis an option for fancybox v2.x that does not exist in v1.x (so you will not find it on fancybox.net)

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

// <![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
    });
});
// ]]>