tutorial_39_example_1.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>
  // hacks to manage vendor prefixes
  document.exitFullscreen = document.exitFullscreen ||
                            document.webkitExitFullscreen ||
                            document.mozExitFullScreen ||
                            document.msExitFullscreen;

  function requestFullscreen(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 container = document.getElementById("container");
  var myimage   = document.getElementById("myimage");

  myimage.addEventListener("click", function(e) {
    if(!document.fullscreenElement) {
      requestFullscreen(container);
    } else {
      document.exitFullscreen();
    }
  }, false);

</script>