Skip to content

Instantly share code, notes, and snippets.

@hysysk

hysysk/fullpage

Created August 26, 2012 01:45
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hysysk/3473035 to your computer and use it in GitHub Desktop.
Save hysysk/3473035 to your computer and use it in GitHub Desktop.
Download ZIP
Expand image to full page with JavaScript and CSS3
Raw
fullpage
<!DOCTYPE html>
<html>
<head>
<title>fullpage</title>
<script>
window.onload = function() {
var body = document.getElementsByTagName('body')[0];
body.addEventListener("click", openFullPage, false);
function openFullPage(e) {
if(e.target && e.target.nodeName == 'IMG') {
var fullpage = document.createElement('div');
body.appendChild(fullpage);
fullpage.style.backgroundImage = 'url("' + e.target.src + '")';
fullpage.style.backgroundSize = 'contain';
fullpage.style.backgroundRepeat = 'no-repeat';
fullpage.style.backgroundColor = '#ffffff';
fullpage.style.width = '100%';
fullpage.style.height = '100%';
fullpage.style.backgroundPosition = 'center center';
fullpage.style.position = 'absolute';
fullpage.style.top = body.scrollTop + 'px';
fullpage.style.left = '0';
fullpage.addEventListener("click", closeFullPage, false);
}
}
function closeFullPage(e) {
body.removeChild(e.target);
}
};
</script>
</head>
<body>
<img src="http://placehold.it/400x400" />
<img src="http://placehold.it/400x400" />
<img src="http://placehold.it/400x400" />
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment