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.

First, you have to make sure what version of fancybox you are using. Anything related to fancybox v1.x (v1.3.4 the latest) you can find it at http://fancybox.net/ On the other hand, anything related to fancybox v2.x (v2.1.5 so far) you can find it at http://fancyapps.com/fancybox/ **Notice** that API options for v1.x and v2.x are incompatible with each other. Yes, both versions were developed by the same author but v2.x is the evolution of v1.x. BTW `maxWidth` is an option for fancybox v2.x, [see more](http://fancyapps.com/fancybox/#docs) — JFK, Mar 16 '14 at 00:18
you are adding the fancybox script after `// ]]>` and outside the `.ready()` method so it's set as commented out (therefore not working)... add it just after your `jPages()` method instead. See http://jsfiddle.net/bWa2v/ — JFK, Mar 16 '14 at 02:43
Thanks! That worked. But why is the horizontal scrollbar still there? — Adam, Mar 16 '14 at 02:48
I guess because your image is not responsive. Try adding a css rule like `max-width: 100%` so it can adjust to the width of the parent container `.testimonialcontainer .fulltext .img` — JFK, Mar 16 '14 at 02:53
So I will post my comments as answer and it would be great if you can accept it then — JFK, Mar 16 '14 at 02:59

score 5 · Accepted Answer · answered Mar 16 '14 at 03:03

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

Fancybox with size to viewport but also with maximum width

1 Answers1