使用fancybox +全屏选项

Question

在我的网站上,我有一些图像,我在fancybox中显示它们.一切正常,但现在网站的要求是对照片采用全屏模式,全屏我的意思是我想在我的花式框底部添加一个按钮,当用户点击该按钮时,当前图像(fancybox图像)必须以全屏模式显示.

全屏示例:http://buildinternet.com/project/supersized/slideshow/3.2/demo.html

但是这个例子并不适合我的情况因为我仍然需要在全屏模式之前使用fancybox.

所以有人有一些代码可以分享或者一些好的库,我可以做那个集成btw jQuery Fancybox和一些全屏api？谢谢

Answer 1

以下步骤将满足您的需求:

1. 请参阅以下URL以了解如何向Fancybox 添加自定义按钮:向jQuery的fancybox添加自定义按钮.它需要一些努力但它确实有效.
2. 首次显示Fancybox时,挂钩自定义按钮以启动全屏模式.使用Supersized插件.
3. 用于显示超级图像的div将隐藏在页面上,并且在启动全屏时您将显示Supersize div.
4. 在Supersized div中添加一个"关闭"按钮,并在单击时隐藏div

以上步骤将会这样做.Fancybox和Supersized都需要一些自定义,但您将能够达到预期的效果.