jQuery Full Screen Facebook Like

Hi Guys,

Ok to start with this solution will not work on Internet Explorer and will work perfectly on Chrome or webkit based browsers like Firefox. One more reason to ditch that browser 🙂

 

So recently Facebook made a change where you can view your photo in Full Screen. So how to switch your browser screen to full screen mode.

We will be looking at

  1. Just by clicking a Link how to switch to full screen mode
  2. How to make an Element full screen.

 

Just by clicking a Link how to switch to full screen mode

Ok so try this code below

[geshi lang=”javascript” nums=”1″ target=”_self” ]

Above code will work on full document and make it Full screen.

 

So in the above code we are grabbing an Element and applying requestFullScreen* method to that element.

Now lets see How to make an Image full screen.

There is not much change in the logic, http://jaspreetchahal.org/wp-content/uploads/2012/04/gold_wheat.jpg

[geshi lang=”javascript” nums=”1″ target=”_self” ]

As you see that we are trying to make an image Full screen here. our elem variable is a reference to “img” which is an ID for the Image we want to make full screen.

If you are using Chrome or FF try click the link below

Full Screen Image

Images like above can be downloaded from iStockPhoto. Join now

[sam_ad id=”54″ codes=”true”]

 

 

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Comments

  1. function enterFullScreen(){
    var bro = navigator.appName;
    var elem = document.getElementById(“video”);
    // IE/Opera
    if(bro == “Microsoft Internet Explorer” || bro == “Opera”)
    {
    elem.style.width = ‘100%’;
    elem.style.height = ‘100%’;
    elem.style.position = ‘absolute’;
    elem.style.left = ‘0px’;
    elem.style.top = ‘0px’;
    }

    if (bro != “Microsoft Internet Explorer”)
    {
    if(elem.requestFullScreen) {
    elem.requestFullScreen();
    } else if (elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullScreen) {
    elem.webkitRequestFullScreen();
    }

    }
    }

    welcome

  2. Solution for IE 9:

    function enterFullScreen(){

    var elem = document.getElementById(“video”);
    //for IE

    elem.style.width = ‘100%’;
    elem.style.height = ‘100%’;
    elem.style.position = ‘absolute’;
    elem.style.left = ‘0px’;
    elem.style.top = ‘0px’;
    //show full screen

    if (elem.requestFullScreen) {
    elem.requestFullScreen();
    } else if (elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullScreen) {
    elem.webkitRequestFullScreen();
    }

  3. doesn’t work on IE

  4. great blog

Leave a Reply