How does the fullscreen Facebook viewer work?

Question

We're used to using websites like youtube in full screen, but now Facebook offers this for its image gallery. What does Facebook do for full-screen image viewing, which seems to use normal hmtl encoding?

Answer 1

This is a non-standard Full Screen API .

In theory (from an article related to the page I linked to above):

var elem = document.getElementById("myId"); if (elem.requestFullScreen) { elem.requestFullScreen(); } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullScreen) { elem.webkitRequestFullScreen(); } 

Answer 2

It is more or less that.

Here is the actual working example for the job. all html5 .. DOCUMENTATION

demo link down the page a little ... DEMO

Answer 3

Johndyer has a jQuery plugin that works with the native full-screen api. It works great with Chrome / Firefox / Safari right now and maybe Internet Explorer and Opera in the future.

Furthur, some trick that makes the api higher for working with the current version of Internet Explorer.

Opera does not currently support.

Using the API is very simple:

  <button onclick="fullScreenApi.requestFullScreen(document.documentElement)" /> 

Demo1 by Johndyer

Demo 2 restricting work with Internet Explorer

https://github.com/sindresorhus/screenfull.js/ is a cross-browser script (for browsers that can use full screen mode)