I recently read about Full-screen mode on the Mozilla Developer Network and it looked really interesting. So after a little playing around of my own I managed to get this working with a jQuery trigger to view an image in full-screen mode. So here’s how I did it.

First whip up a simple web page with a list containing images. Create a new file called index.html.


<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Fullscreen Images</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
</head>
<body>
<div id="content">
    <h1>Fullscreen Images</h1>
    <div id="wrapper">
        <ul id="images">
            <li id="emement"><img class="fullscreen" src="images/blue-banded-morpho-butterfly-top.jpg" alt="" /></li>
            <li><img class="fullscreen" src="images/red-tailed-hawk-4.jpg" alt="" /></li>
            <li><img class="fullscreen" src="images/tocllarajumountain.jpg" alt="" /></li>
            <li><img class="fullscreen" src="images/tree-hugging-baby-tiger.jpg" alt="" /></li>
        </ul>
    </div>
</div>
</body>
</html>

Ok looking good. For some nice simple style lets add some css. Create a file called style.css containing this.


* {margin:0px; padding:0px;}
body {color:#444444; font-size:13px; background: #f2f2f2; font-family:"Century Gothic", Helvetica, sans-serif;}
a, a:link, a:visited {color:#af101b; text-decoration:none;}
a:hover {color:#fff; text-decoration:none;}
h1 {color:#444; font-size:36px; text-shadow:1px 1px 1px #fff; padding:20px;}
img {max-width:100%; height:auto;}
p {padding: 10px 0;}
#content {margin:15px auto; text-align:center; width:640px; position:relative; height:100%;}
#wrapper {width:640px; overflow:hidden;}
ul {list-style:none;}
ul, li {float:left;}
li {position:relative; width:140px; margin:5px; padding:5px; background:#fff;}

Sorry if you have trouble reading single line css, but I just prefer it. Now include this file. Within the <head> tags add this


<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

Great! It’s shaping up nicely.
Now as we’ll be using jQuery we better include that. I usually go with the Google CDN, so add this just before the closing </body> tag


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Now down to the jQuery and JavaScript.
From reading the Mozilla Developer Network page we know that you can just use some simple JavaScript to have a trigger that makes a defined element fullscreen, using this


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

But what if you want the image you click to be what you see in full screen? Well it’s pretty simple actually. Simply make this code above a function, and call that function upon clicking on an image, passing the image as a parameter to the function. Might not sound simple if you’re not that experienced with JavaScript, but don’t worry, it is.

Now I chose to trigger with jQuery here but you could use vanilla JavaScript if you prefer. So first, after we included our jQuery library, create an anonymous function and write our onClick event.


<script>
(function(){
    $('img').on("click", function(){
        fullScreenFunc(this);
    });
});
</script>

Ok, so we’ve called our function, and passed ‘this’ as a parameter. In this instance, ‘this’ will refer to the object we clicked, so the image. Which is great because that’s what we need to be in full-screen mode.

Now to write the function


function fullScreenFunc(obj){
if (obj.requestFullscreen) {
obj.requestFullscreen();
} else if (obj.mozRequestFullScreen) {
obj.mozRequestFullScreen();
} else if (obj.webkitRequestFullScreen) {
obj.webkitRequestFullScreen();
}
}

So you can see in the function, we use the parameter we passed as ‘obj’. After a simple check to see if the browser supports requestFullscreen, it executes. Note that there are three variations for the current three browsers that support full-screen mode. requestFullscreen, mozRequestFullScreen and webkitRequestFullScreen.

So here’s what your index.html file will look like


<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fullscreen Images</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="content">
    <h1>Fullscreen Images</h1>
    <div id="wrapper">
        <ul id="images">
            <li><img src="images/blue-banded-morpho-butterfly-top.jpg" alt="" /></li>
            <li><img src="images/red-tailed-hawk-4.jpg" alt="" /></li>
            <li><img src="images/tocllarajumountain.jpg" alt="" /></li>
            <li><img src="images/tree-hugging-baby-tiger.jpg" alt="" /></li>
        </ul>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
(function(){
    $('img').on("click", function(){
        fullScreenFunc(this);
    });
});

function fullScreenFunc(obj){
    if (obj.requestFullscreen) {
        obj.requestFullscreen();
    } else if (obj.mozRequestFullScreen) {
        obj.mozRequestFullScreen();
    } else if (obj.webkitRequestFullScreen) {
        obj.webkitRequestFullScreen();
    }
}
</script>
</body>
</html>

And you know what? That’s it! Nice and simple huh?

Ok so why not extend this a little. If you have a few images within your list, you might want to cycle through the images while in full-screen mode? How might we do that?

Well it’s not as tricky as you might think. First lets tidy things up a bit by using an external file for the bulk of our JavaScript. Create a file called script.js and include it  below where we included our jQuery


<script src="script.js"></script>

Now the way we are going to code this is have an empty div on the page that will house the images when they are in full-screen mode. So in our index.html file just under the closing </ul> tag, add this


<div id="full_image"></div>

Then remove the code inside our anonymous function and replace it with this


var fullScreen = $('#full_image');
$('img').on("click", function(){
fullScreen.empty();
$(this).clone().appendTo(fullScreen);
fullScreenFunc();
 });

Ok so to explain, you can see we are setting our new empty div as a variable that we will use as the container to put into full-screen mode. Then on clicking an image, we, as a precaution, empty the div, and clone the image that was clicked, to append it to the empty div. Once this is done, we run our function, which we will now delete in index.html, and move over to script.js.

So lets create our full-screen mode function again.


function fullScreenFunc(){
var fullScreenObj = document.getElementById('full_image');
if (fullScreenObj.requestFullscreen) {
fullScreenObj.requestFullscreen();
} else if (fullScreenObj.mozRequestFullScreen) {
fullScreenObj.mozRequestFullScreen();
} else if (fullScreenObj.webkitRequestFullScreen) {
fullScreenObj.webkitRequestFullScreen();
}
}

Looks the same, except we don’t pass in a parameter now, and we ‘cache’ the full-screen element again. This is because we first ‘cached’ it in jQuery, and vanilla JavaScript won’t recognise this unfortunately.

Now lets create the arrow key events. In JavaScript you can pick up specific keyboard events so lets listen for them. The left arrow key fires a keyCode of 37, and right fires 39, so we can listen for those and run a function accordingly. In script.js still, add this.


$(document).keydown(function(e){
if (e.keyCode == 37) {
var code = 'left';
cycle(code);
return false;
}
if (e.keyCode == 39) {
var code = 'right';
cycle(code);
return false;
}
});

When we detect these keystrokes, we ‘cache’ the key, and run a new function, passing the key to the function. Simple.

Ok lets do the last bit and create our cycle function that will allow us to hit left and right arrow keys to cycle through the images in the list.
First lets open the function with our passed object and set some variables


function cycle(obj){
var container = $('#full_image');
var currentAttr = container.children().attr('src');
var liContainer = $('ul#images');
var currentLi = liContainer.find('[src$="'+currentAttr+'"]').parent();

We need to save the empty div as a variable, as well as the current image in full-screen mode. We go for the source rather than the element itself so we can then search for that image in our image list and ‘cache’ that as currentLi.

So if the left arrow key was hit we can detect it and work on with this


if ( obj == 'left' ){
if ( currentLi.is(":first-child") ){
var previous = $('ul#images li:last-child img');
} else {
var previous = currentLi.prev().children();
}
container.empty();
previous.clone().appendTo(container);
 }

We first need to check if the current image is the first in the list in the list because if it’s for example the first, and the left arrow key is hit, we have to show the last image, otherwise we can simply show the previous image. Once we know where we are, we grab the previous image, empty the full-screen div and append the previous image.

We then need to do the same but for the right arrow key.


if ( obj == 'right' ){
    if ( currentLi.is(":last-child") ){
        var next = $('ul#images li:first-child img');} else {
        var next = currentLi.next().children();
    }
    container.empty();
    next.clone().appendTo(container);
}

Excellent, now we put this together and you will have something that looks like this.


$(document).keydown(function(e){
    if (e.keyCode == 37) {
        var code = 'left';
        cycle(code);
        return false;
    }
    if (e.keyCode == 39) {
        var code = 'right';
        cycle(code);
        return false;
    }
});

function cycle(obj){
    var container = $('#full_image');
    var currentAttr = container.children().attr('src');
    var liContainer = $('ul#images');
    var currentLi = liContainer.find('[src$="'+currentAttr+'"]').parent();

    if ( obj == 'left' ){
        if ( currentLi.is(":first-child") ){
            var previous = $('ul#images li:last-child img');
        } else {
            var previous = currentLi.prev().children();
        }
        container.empty();
        previous.clone().appendTo(container);
    }

    if ( obj == 'right' ){
        if ( currentLi.is(":last-child") ){
            var next = $('ul#images li:first-child img');
        } else {
            var next = currentLi.next().children();
        }
        container.empty();
        next.clone().appendTo(container);
    }
}

function fullScreenFunc(){
    var fullScreenObj = document.getElementById('full_image');
    if (fullScreenObj.requestFullscreen) {
        fullScreenObj.requestFullscreen();
    } else if (fullScreenObj.mozRequestFullScreen) {
        fullScreenObj.mozRequestFullScreen();
    } else if (fullScreenObj.webkitRequestFullScreen) {
        fullScreenObj.webkitRequestFullScreen();
    }
}

Hey presto, it should work a treat now!

Demo 1
Demo 2

Download the files on GitHub of fork it 🙂