Facebook like full screen photo / video without Flash using BigScreen JS

August 30, 2012
Javascript, Video
0 Comments
SG

Many of you might have seen this in Facebook, there is an option to to view the photo in the full-screen. You can do the same thing with BigScreen JS. There are many features in JS which are listed down,

It can be done for a particular HTML Element in the web page
It can also be done for the whole page
Toggle screen option is also available

Now the supported browsers are,

Chrome 15+
Firefox 10+
Safari 5.1+

The browsers supported for video:

Safari 5.0
iOS 4.2+

Let’s see the implementation :

Putting entire page in Full Screen

document.getElementById('button').addEventListener('click', function() {
    if (BigScreen.enabled) {
        BigScreen.toggle();
    }
    else {
        // fallback for browsers that don't support full screen
    }
}, false);

document.getElementById('button').addEventListener('click', function() {

if (BigScreen.enabled) {

BigScreen.toggle();

}

else {

// fallback for browsers that don't support full screen

}

}, false);

Put any element in full screen

var element = document.getElementById('target');

document.getElementById('button').addEventListener('click', function() {
    if (BigScreen.enabled) {
        BigScreen.request(element);
        // You could also use .toggle(element)
    }
    else {
        // fallback for browsers that don't support full screen
    }
}, false);

var element = document.getElementById('target');

document.getElementById('button').addEventListener('click', function() {

if (BigScreen.enabled) {

BigScreen.request(element);

// You could also use .toggle(element)

}

else {

// fallback for browsers that don't support full screen

}

}, false);

Detecting full screen changes

BigScreen.onenter = function() {
    // called when entering full screen
}

BigScreen.onexit = function() {
    // called when exiting full screen
}

BigScreen.onenter = function() {

// called when entering full screen

}

BigScreen.onexit = function() {

// called when exiting full screen

}

Requirement : JS framework & Supported browsers
Demo & Downloads :- http://brad.is/coding/BigScreen/
License : Apache 2.0 License