jquery - 使用 fancybox + 全屏选项

Question

在我的website ，我有一些图像，我将它们显示在一个 fancybox 中。一切正常，但现在网站的要求是为照片提供全屏模式，全屏的意思是我想在我的 fancybox 底部添加一个按钮，当用户单击该按钮时，当前图像(fancybox 图像)必须以全屏模式显示。

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

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

所以有人有一些代码可以分享，或者有一些好的库，我可以通过 jQuery Fancybox 和一些全屏 api 来进行集成？谢谢

Answer 1

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

1. 请参阅以下 URL，了解如何向 Fancybox 添加自定义按钮:Adding custom buttons to jQuery's fancybox 。这需要一些努力，但确实有效。
2. 首次显示 Fancybox 时， Hook 自定义按钮以启动全屏模式。使用Supersized plug-in .
3. 用于显示超大图像的 div 将隐藏在页面上，启动全屏时将显示超大 div。
4. 向超大 div 添加“关闭”按钮，并在单击时隐藏该 div

按照上面的步骤就可以了。 Fancybox 和 Supersized 都需要进行一些自定义，但您将能够实现您想要的效果。