Image enlarge
Jump to navigation
Jump to search
Click on Thumbnail to make an image pop up in a modal window
HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<article>
<h2>The Art</h2>
<p>This years peice</p>
<div class="pixgrid group">
<ul class="group sixe">
<li> <img src="image/cp-00001_th.jpg" alt=""> </li>
<li> <img src="image/cp-00002_th.jpg" alt=""> </li>
<li> <img src="image/cp-00003_th.jpg" alt=""> </li>
<li> <img src="image/cp-00004_th.jpg" alt=""> </li>
</ul>
</div>
</article>
<script src="js/myscript.js"></script>
</body>
</html>
CSS
ul {
list-style: none;
}
ul li {
display: inline-block;
}
.sixe img {
width: 100px;
height: 100px;
}
JavaScript
(function() {
var myNode = document.querySelector('.pixgrid ul');
myNode.addEventListener("click", function(e) {
if (e.target.tagName === 'IMG') {
var myOverlay = document.createElement('div');
myOverlay.id = 'overlay';
document.body.appendChild(myOverlay);
// setup overlay styles
myOverlay.style.position = 'absolute';
myOverlay.style.top = 0;
myOverlay.style.backgroundColor = 'rgba(0,0,0,0.7)';
myOverlay.style.cursor = 'pointer';
// resize and position overlay
myOverlay.style.width = window.innerWidth + 'px';
myOverlay.style.height = window.innerHeight + 'px';
myOverlay.style.top = window.pageYOffset + 'px';
myOverlay.style.left = window.pageXOffset + 'px';
// create image elemtn
var imageSrc = e.target.src;
var largeImage = document.createElement('img');
largeImage.id = 'largeImage';
largeImage.src = imageSrc.substr(0, imageSrc.length - 7) + '.jpg';
largeImage.style.display = 'block';
largeImage.style.position = 'absolute';
// wait until image has loaded
largeImage.addEventListener('load', function() {
// resize image if taller
if (this.height > window.innerHeight) {
this.ratio = window.innerHeight / this.height;
this.height = this.height * this.ratio;
} // end if
// resize image if wider
if (this.width > window.innerwidth) {
this.ratio = window.innerwidth / this.width;
this.width = this.width * this.ratio;
} // end if
centerImage(this);
myOverlay.appendChild(largeImage);
}); // image has loaded
myOverlay.addEventListener('click', function() {
if (myOverlay) {
window.removeEventListener('resize', window, false);
window.removeEventListener('scroll', window, false);
myOverlay.parentNode.removeChild(myOverlay);
} // end if
}, false);
window.addEventListener('scroll', function() {
if (myOverlay) {
myOverlay.style.top = window.pageYOffset + 'px';
myOverlay.style.left = window.pageXOffset + 'px';
} // enf if
}, false);
// fix overlay if window is resized
window.addEventListener('resize', function() {
if (myOverlay) {
myOverlay.style.width = window.innerWidth + 'px';
myOverlay.style.height = window.innerHeight = 'px';
myOverlay.style.top = window.pageYOffset + 'px';
myOverlay.style.left = window.pageXOffset + 'px';
centerImage(largeImage);
}
}, false);
} // target the image
}, false); // image is clicked
function centerImage(theImage) {
var myDifX = (window.innerWidth - theImage.width) / 2;
var myDifY = (window.innerHeight - theImage.height) / 2;
theImage.style.top = myDifY + 'px';
theImage.style.left = myDifX + 'px';
return theImage;
}
})(); // IFFFi