Modern HTML5 Lightbox in 12 Lines of JavaScript

index.html

<nav id="thumbs">
  <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/elephant.jpg"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/elephant-thumb.jpg" alt></a>
  <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/taj-mahal.jpg"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/taj-mahal-thumb.jpg" alt></a>
  <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/wise-man.jpg"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/wise-man-thumb.jpg" alt="wise-man-thumb"></a>
</nav>
<dialog id="cover">
		<img src="" alt>
  		<button id="closecover">Close</button>
</dialog>

Modern-HTML5-Lightbox-in-12-Lines-of-JavaScript.markdown

Modern HTML5 Lightbox in 12 Lines of JavaScript

Uses the <dialog> modal element to display large images, flexbox for thumbnails. Complete explanatory article. Photographs by Richard Kardhordó, licensed under Creative Commons

A Pen by Dudley Storey on CodePen.

License.

script.js

// uses Google polyfill for dialog element in non-supporting browsers
// (https://github.com/GoogleChrome/dialog-polyfill)

function showImage(e) {
	e.preventDefault();
	coverimage.setAttribute("src", this.getAttribute("href"));
	coverimage.setAttribute("alt", this.querySelector("img").getAttribute("alt"));
	cover.showModal();
}
document.getElementById("closecover").onclick = function() { 
  coverimage.setAttribute("src", "");
  cover.close(); 
}

var imglinks = document.getElementById("thumbs").getElementsByTagName('a'),
cover = document.getElementById("cover"),
coverimage = cover.getElementsByTagName("img")[0],
testdialog=document.createElement("dialog");
testdialog.setAttribute("open", "");
if (!testdialog.open){
	dialogPolyfill.registerDialog(cover);
}
for (var i=0; i<imglinks.length; i++) { imglinks[i].onclick = showImage; }

style.css

dialog {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    border: solid;
    padding: 1em;
    background: white;
    color: black;
    top: 10%;
    display: none;
}
dialog[open] {
    display: block;
}
.backdrop {
    position: fixed;
    background-color: rgba(0,0,0,0.1);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
@keyframes fadeToNearBlack { 
  to { background: rgba(0,0,0,0.9); }
}
@keyframes goBig { 
  to { opacity: 1; } 
}
body { min-height: 100vh; }
nav#thumbs { 
  display: flex; 
} 
nav#thumbs a { 
  display: block; flex: 1; 
} 
nav#thumbs a img { 
  width: 100%; height: auto; 
}
dialog { 
  border: none; opacity: 0; 
}
dialog button { 
  border: none;
  background: none;
  font-size: 1.2rem; 
}
dialog[open] { 
  animation: goBig 1s .4s forwards;
  max-width: 700px; 
}
dialog[open]::backdrop { 
  animation: fadeToNearBlack 1s forwards; 
}
.backdrop { 
  animation: fadeToNearBlack 1s forwards; 
}
dialog img { 
  width: 100%; height: auto; 
}