Small snippet for a fullscreen mode utility

index.html

<div id='container'>
  <img src='assets/slideshow_3.png' id='myimage' />
</div>

<p style='text-align: center'>
Click the image to expand - Hit the ESC key to collapse
</p>

<style type="text/css">

  #myimage {
    height: 300px;
    display:block;
    margin: auto;
  }

  :-webkit-full-screen #container {
    width: 100%;
    height: 100%;
  }
  :-webkit-full-screen #myimage {
    height: 600px;
  }

  :-moz-full-screen #container {
    width: 100%;
    height: 100%;
  }
  :-moz-full-screen #myimage {
    height: 600px;
  }
</style>


<script>
  var container = document.getElementById("container");
  var myimage   = document.getElementById("myimage");

  myimage.addEventListener("click", function(e) {
    uiFullScreenUtil(container);
  }, false);

</script>

util.ui.fullscreen.js

(function (window, document, undefined) {


    /***
     * Internal functions to provide us with one cross-browser call for requestFullscreen and exitFullscreen
     */
    var requestFullscreen = function (element) {
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) { // note the upper case S
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        }
    };

    var exitFullscreen = (function () {
        return (document.exitFullscreen || document.webkitExitFullscreen || document.mozExitFullScreen || document.msExitFullscreen);
    })();
    document.exitFullscreen = exitFullscreen;

    window.uiFullScreenUtil = function (elm) {
        if (elm && !document.fullscreenElement) {
            requestFullscreen(elm);
        } else if (document.fullscreenElement) {
            exitFullscreen();
        }
    };
})(window, document)