Fancybox带有视口大小，但也具有最大宽度

Question

我在我的网站上使用Fancybox2（fancybox.net）。 当灯箱显示时，我希望它根据浏览器的屏幕宽度进行调整，以便在移动设备和桌面上都能够良好地查看。 然而，在桌面上，我希望该框具有最大宽度为500px。

我正在寻找max-width选项，但是我无法在http://fancybox.net/api上找到如何执行此操作的方法。

- Adam

---

首先，您必须确定您正在使用哪个版本的fancybox。与fancybox v1.x（最新版本为v1.3.4）相关的任何内容都可以在http://fancybox.net/找到。另一方面，与fancybox v2.x（目前为止的最新版本为v2.1.5）相关的任何内容都可以在http://fancyapps.com/fancybox/找到。请注意，v1.x和v2.x的API选项彼此不兼容。是的，这两个版本都是由同一位作者开发的，但v2.x是v1.x的进化版。顺便说一下，`maxWidth`是fancybox v2.x的一个选项，了解更多。 - JFK

你需要在 // ]]> 后面并且 .ready() 方法之外添加 fancybox 脚本，这样它就会被注释掉（因此不起作用）... 相反，在 jPages() 方法之后添加。请参阅 http://jsfiddle.net/bWa2v/ - JFK

谢谢！那个有效了。但是为什么水平滚动条还在呢？ - Adam

我猜是因为你的图片不具有响应性。尝试添加一个CSS规则，例如max-width: 100%，这样它就可以根据父容器.testimonialcontainer .fulltext .img的宽度进行调整。 - JFK

那么我会将我的评论发布为答案，如果您能接受它，那就太好了。 - JFK

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初始化，如您的代码所示：

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

- JFK