Using fancybox + fullscreen option

Question

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

Answer 1

The following steps will do what you're looking for:

1. 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.
2. When first showing the Fancybox, hook the custom button to launch fullscreen mode. Use the Supersized plug-in.
3. The div used to show the Supersized images will be hidden on the page and you'll show the Supersize div when launching fullscreen.
4. 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.