Fullscreen image viewing
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
document.addEventListener("keydown", function(e) {
if (e.keyCode == 13) {
toggleFullScreen();
}
}, false);
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
<img id="img" src="//placekitten.com/800/600">
/**
* Fullscreen image viewing
*/
* { margin: 0 }
body {
max-width: 700px;
margin: 0 auto;
}
#img { max-width: 100%; }
:-webkit-full-screen body {
max-width: none;
background: #000;
}
:-webkit-full-screen #img {
width: 100%;
height: 100%;
}