Instantly share code, notes, and snippets.

Embed
What would you like to do?
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment