So, how did Facebook implement this photo viewer feature? You might have also noticed this kind of feature in YouTube where you can view videos in full screen.
If you want to display HTML elements in fullscreen without any parts of the browser like bookmarks bar, address bar or toolbar visible this is the API you have to use. The implementation is fairly simple and straight forward.
The element that you want to be presented in full-screen mode should make requestFullScreen() method call. You can also use jQuery Fullscreen Plugin to implement this.
var elem = document.getElementById(“elementID”);
/*Note: For Gecko based browser it is elem.mozRequestFullScreen() and in WebKit it is elem.webkitRequestFullScreen()*/
FullScreen API Browser Compatibility:
I have put together a simple demo trying to replicate the FB Fullscreen Photo Viewer feature. Of course it is a very basic version compared to the actual one 🙂
Did the demo work out for you? Have any inputs to share with us? Do feel free to share it via comments.