使用 fancybox +全屏选项

Question

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

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

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

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

Answer 1

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

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

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