我在我的网站上使用Fancybox2(fancybox.net)。
当灯箱显示时,我希望它根据浏览器的屏幕宽度进行调整,以便在移动设备和桌面上都能够良好地查看。
然而,在桌面上,我希望该框具有最大宽度为500px。
我正在寻找
我正在寻找
max-width
选项,但是我无法在http://fancybox.net/api上找到如何执行此操作的方法。max-width
选项,但是我无法在http://fancybox.net/api上找到如何执行此操作的方法。任何与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
});
});
// ]]>
// ]]>
后面并且.ready()
方法之外添加 fancybox 脚本,这样它就会被注释掉(因此不起作用)... 相反,在jPages()
方法之后添加。请参阅 http://jsfiddle.net/bWa2v/ - JFKmax-width: 100%
,这样它就可以根据父容器.testimonialcontainer .fulltext .img
的宽度进行调整。 - JFK