jQuery 使用fancybox + 全屏选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6589080/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using fancybox + fullscreen option
提问by Arthur Neves
in my website, I have some images which I am displaying them inside a fancybox. Everything working ok, but now the requirement of the website is to have a Fullscreen mode for the photos, What I mean by fullscreen is I want a add a button at the bottom of my fancybox, and when the user click on that button, the current image(fancybox image) has to be displayed in fullscreen mode.
在我的网站上，我有一些图像，我将它们显示在一个花哨的盒子里。一切正常，但现在网站的要求是为照片提供全屏模式，我所说的全屏是我想要在我的花式框底部添加一个按钮，当用户单击该按钮时，当前图像（fancybox 图像）必须以全屏模式显示。
Example of fullscreen: http://buildinternet.com/project/supersized/slideshow/3.2/demo.html
全屏示例：http: //buildinternet.com/project/supersized/slideshow/3.2/demo.html
But this example doesnt fit in my situation because I still need the fancybox before the fullscreen mode.
但是这个例子不适合我的情况，因为在全屏模式之前我仍然需要fancybox。
So someone has some code to share or some good library that I can do that integration btw jQuery Fancybox and some fullscreen api? thanks
所以有人有一些代码可以共享或一些好的库，我可以集成 btw jQuery Fancybox 和一些全屏 api？谢谢
回答by NakedBrunch
The following steps will do what you're looking for:
以下步骤将满足您的要求：
- See the following URL to learn how to add a custom button to Fancybox: Adding custom buttons to jQuery's fancybox. It will take a bit of effort but it does work.
- When first showing the Fancybox, hook the custom button to launch fullscreen mode. Use the Supersized plug-in.
- The div used to show the Supersized images will be hidden on the page and you'll show the Supersize div when launching fullscreen.
- Add a "close" button to the Supersized div and hide the div when clicked
- 请参阅以下 URL 以了解如何向 Fancybox添加自定义按钮：将自定义按钮添加到 jQuery 的fancybox。这将需要一些努力，但它确实有效。
- 首次显示 Fancybox 时，勾上自定义按钮以启动全屏模式。使用Supersized 插件。
- 用于显示超大图像的 div 将隐藏在页面上，您将在启动全屏时显示超大 div。
- 向超大 div 添加“关闭”按钮并在单击时隐藏 div
The above steps will do it. There is a bit of customization required for both Fancybox and Supersized but you will be able to achieve your desired effect.
上面的步骤就可以了。Fancybox 和 Supersized 都需要一些自定义，但您将能够达到您想要的效果。
