使用 fancybox + 全屏选项

Question

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

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

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

所以有人有一些代码要共享或一些好的库，我可以集成 btw jQuery Fancybox 和一些全屏 api？ 谢谢

Answer 1

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

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

以上步骤即可。 Fancybox 和 Supersized 都需要进行一些自定义，但您将能够达到您想要的效果。