Geek Answers Handbook

Using the fancybox + fullscreen option

on my site , I have some images that I show them inside fancybox. Everything is working fine, but now the requirement of the website is to have full screen mode for photos. What I mean by full screen mode, I want to add a button at the bottom of my fancybox, and when the user clicks on this button, the current image (fancybox image) should be displayed in full screen mode.

Full screen example: http://buildinternet.com/project/supersized/slideshow/3.2/demo.html

But this example is not suitable in my situation, because I still need a fancybox in front of full screen mode.

So does anyone have some kind of code to share or some good library that I can make for this integration of btw jQuery Fancybox and some full-screen api? thanks

+4
source share
1 answer

The following steps will do what you are looking for:

  • See the following URL for how to add a custom button to Fancybox: Adding custom buttons to jQuery fancybox . It will take a little effort, but it really works.
  • When showing Fancybox for the first time, enable the custom button to start full screen mode. Use the Supersized plug-in .
  • Expanded to display add-on images will be hidden on the page, and when you start full-screen mode, you will see a Supersize div.
  • Add a close button to the Supersized div and hide the div when clicked

The above steps will do it. Fancybox and Supersized require a little customization, but you can achieve the desired effect.

+5
source

More articles:


All Articles