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.
Example of fullscreen: 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.
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
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
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.
来源：https://stackoverflow.com/questions/6589080/using-fancybox-fullscreen-option