jquery - 具有视口(viewport)大小但也具有最大宽度的 Fancybox

Question

我在我的网站上使用 Fancybox2 (fancybox.net)。 当显示灯箱时，我希望它根据浏览器的屏幕宽度调整大小，这样在移动设备和桌面设备上都可以很好地查看。 但是，在桌面上，我希望框的最大宽度为 500 像素。

我一直在寻找max-width 选项，但在http://fancybox.net/api 上找不到。这该怎么做。

Answer 1

任何与 fancybox v1.x(最新的 v1.3.4)相关的内容都可以在 fancybox.net 找到。 .另一方面，任何与 fancybox v2.x(目前为 v2.1.5)相关的内容都可以在 fancyapps.com/fancybox 找到。

请注意，v1.x 和 v2.x 的 API 选项彼此不兼容。顺便说一句，maxWidth 是 fancybox v2.x 的一个选项，它在 v1.x 中不存在(因此您不会在 fancybox.net 上找到它)

为避免潜在的错误，请在 .ready() 方法中设置您的 fancybox 初始化，就像在您的 code 中一样。喜欢:

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