javascript - How does Facebooks new fullscreen photo viewer work? - Stack Overflow

admin管理员组

文章数量:1355542

We're used to using websites like youtube in full screen, but now Facebook offers this for its image gallery. What is Facebook doing to allow full screen image browsing, that seems to use normal hmtl coding?

We're used to using websites like youtube in full screen, but now Facebook offers this for its image gallery. What is Facebook doing to allow full screen image browsing, that seems to use normal hmtl coding?

• javascript
• html
• css
• facebook

Share Improve this question Follow edited May 14, 2013 at 3:37 jay 12.5k1616 gold badges6666 silver badges105105 bronze badges asked Mar 22, 2012 at 19:02 ZoltanZoltan 21922 silver badges99 bronze badges 1

• what's with all the downvotes? I'm curious about this fact too. – gion_13 Commented Apr 6, 2012 at 14:39

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

That is the non-standard Fullscreen API.

In theory (from an article linked from 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();  
}  

That's more or less it..

Here is an actual working example to work off of.. all html5.. DOCUMENTATION

the demo link is down the page a little ways... DEMO

Johndyer has share a plugin for jQuery that work with native fullscreen api. It work great with Chrome/Firefox/Safari right now and maybe Internet Explorer and Opera in future.

Furthur, there is some trick that make the api above to work with current version of Internet Explorer.

Opera is not support currently.

Using the API is easy:

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

Demo1 from Johndyer

Demo 2 that's limited working with Internet Explorer

https://github./sindresorhus/screenfull.js/ is a "crossbrowser" script (for browsers which are able to use fullscreen)

本文标签： javascriptHow does Facebooks new fullscreen photo viewer workStack Overflow