egfx/index.html

## index.html
<head>
  <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
</head>

<section class="galleryWrapper applyEvent">
  <h1 class="header">Click Image to Enlarge</h1>

  <div class="imageContainer clearfix">
    <a class="imageLink" href="https://s-media-cache-ak0.pinimg.com/736x/21/05/0f/21050f0d31602364e1de84e85e0e65e4.jpg" title="An iconic photo. The Trump's visting the first K Mart. You can see the dashless logo in the background.">
      <img class="image" src="https://s-media-cache-ak0.pinimg.com/736x/21/05/0f/21050f0d31602364e1de84e85e0e65e4.jpg" alt="An iconic photo. The Trump's visting the first K Mart. You can see the dashless logo in the background.">
    </a>
    <a class="imageLink" href="http://onakagasuita.info/wp-content/uploads/2014/12/K_Mart.jpg" title="Berlin Cathedral">
      <img class="image" src="http://onakagasuita.info/wp-content/uploads/2014/12/K_Mart.jpg" alt="The only known store front to actually feature a dash. Does it look anything like you remember?">
    </a>
    <a class="imageLink" href="https://i.ytimg.com/vi/cgnaWbPLAks/maxresdefault.jpg" title="There is a large gap between K and M. People remember a dash being here in the classic signage.">
      <img class="image" src="https://i.ytimg.com/vi/cgnaWbPLAks/maxresdefault.jpg" alt="There is a large gap between K and M. People remember a dash being here in the classic signage.">
    </a>
    <a class="imageLink" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6otNKs0UA-S1kDKJB03Ti_bF6-y8dFmmXJaqqZBVOdR75VAWi" title="Shoppers in front of K Mart not K-Mart.">
      <img class="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6otNKs0UA-S1kDKJB03Ti_bF6-y8dFmmXJaqqZBVOdR75VAWi" alt="Shoppers in front of K Mart not K-Mart.">
    </a>
  </div>  <!-- /imageContainer-->

  <div class="overlayContainer">
    <div class="imageBox">
      <div class="relativeContainer">
        <img class="largeImage" src="" alt="">
        <p class="imageCaption"></p>
      </div>  <!-- /relativeContainer -->
    </div>  <!-- /imageBox -->
  </div>  <!-- overlayContainer -->
</section>  <!-- /galleryWrapper -->

## script.js
(function() {

  var image = document.querySelectorAll('.imageLink'),
      overlay = document.querySelector('.overlayContainer'),
      largeImage = document.querySelector('.largeImage'),
      applyEvent = document.querySelector('.applyEvent'),
      caption = document.querySelector('.imageCaption'),
      display = new RegExp('(^| )' + 'display' + '($| )', 'g'),
      opacity = new RegExp('(^| )' + 'opacity' + '($| )', 'g'),
      href,
      alt;

  function lightbox(event) {
    event.preventDefault();
    href = this.getAttribute('href');
    alt = this.children[0].getAttribute('alt');

    largeImage.setAttribute('src', href);
    largeImage.setAttribute('alt', alt);
    caption.innerHTML = alt;
    overlay.className += ' display';

    setTimeout(function() { overlay.className += ' opacity'; }, 25);
    setTimeout(function() { overlay.addEventListener('click', hideOverlay, false); }, 400);
  }

  function hideOverlay() {
    overlay.removeEventListener('click', hideOverlay, false);
    overlay.className = overlay.className.replace(opacity, '');

    setTimeout(function() {
      largeImage.removeAttribute('src');
      largeImage.removeAttribute('alt');
      overlay.className = overlay.className.replace(display, '');
    }, 400);
  }


  /***Event Listener***/
  if ( applyEvent ) {
    for ( var i = 0; i < image.length; i++ ) {
      image[i].addEventListener('click', lightbox, false);
    }
  }

})();

## simple-lightbox.markdown

      
    Raw
  

              simple-lightbox.markdown
            
          
    Simple Lightbox

A Pen by Ilya on CodePen.
License.

  
## style.css
#simple-lightbox {
  box-sizing: border-box;
}

#simple-lightbox {
  font-size: 100%;
}

#simple-lightbox {
  word-wrap: break-word;
}

#simple-lightbox ,
#simple-lightbox .imageCaption {
  line-height: 1.4;
}

#simple-lightbox .clearfix::after {
  content: "";
  display: table;
  clear: both;
}

#simple-lightbox .galleryWrapper {
  font-size: 0.85rem;
  width: 90%;
  margin: 0 auto;
}

#simple-lightbox .galleryWrapper,
#simple-lightbox .imageBox {
  max-width: 60rem;
}

#simple-lightbox .header {
  font: 2.1em 'Playfair Display', serif;
  margin: 1.25rem 0;
}

#simple-lightbox .imageBox,
#simple-lightbox .header {
  text-align: center;
}

.imageContainer {
  padding: 0 0.5rem 1.25rem;
}

#simple-lightbox .imageLink {
  display: inline-block;
}

#simple-lightbox .imageLink,
#simple-lightbox .imageBox {
  line-height: 0;
}

#simple-lightbox .imageLink:nth-of-type(-n+3) {
  margin-bottom: 0.8rem;
}

#simple-lightbox .imageBox,
#simple-lightbox .largeImage,
#simple-lightbox .image,
#simple-lightbox .imageCaption {
  width: 100%;
}

#simple-lightbox .image,
#simple-lightbox .largeImage {
  -webkit-transform: perspective(1px);
  -moz-transform: perspective(1px);
  transform: perspective(1px);
}

#simple-lightbox .overlayContainer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 250;
}

#simple-lightbox .overlayContainer,
#simple-lightbox .imageCaption {
  bottom: 0;
}

#simple-lightbox .relativeContainer {
  position: relative;
  margin: 0 0.5rem;
}

#simple-lightbox .imageBox,
#simple-lightbox .imageCaption {
  position: absolute;
}

#simple-lightbox .imageBox {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#simple-lightbox .display {
  display: block;
}

#simple-lightbox .imageCaption {
  margin: 0;
  font-size: 1.3em;
  padding: 0.325rem;
}


/***Colors***/
#simple-lightbox {
  color: #333;
}

#simple-lightbox .galleryWrapper {
  background-color: #f2f2f2;
  border: 1px solid #333;
}

#simple-lightbox .imageLink {
  outline: none;
  -webkit-transition: all ease .2s;
  -moz-transition: all ease .2s;
  -o-transition: all ease .2s;
  transition: all ease .2s;
}

#simple-lightbox .imageLink:hover,
#simple-lightbox .imageLink:focus {
  opacity: 0.8;
}

#simple-lightbox .overlayContainer {
  visibility: hidden;
  opacity: 0;
  background-color: rgba(51, 51, 51, .9);
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
}

#simple-lightbox .imageBox {
  cursor: pointer;
}

#simple-lightbox .largeImage {
  -webkit-box-shadow: 5px 5px 5px 0px rgb(0, 0, 0);
  -moz-box-shadow: 5px 5px 5px 0px rgb(0, 0, 0);
  box-shadow: 5px 5px 5px 0px rgb(0, 0, 0);
}

#simple-lightbox .imageCaption {
  background: rgba(51, 51, 51, .8);
  color: #fff;
}

#simple-lightbox .opacity {
  visibility: visible;
  opacity: 1;
}


@media only screen and (min-width: 30em) {

#simple-lightbox .imageLink {
  float: left;
  width: 48.33%;
}

#simple-lightbox .imageLink:nth-of-type(1),
#simple-lightbox .imageLink:nth-of-type(3) {
  margin-right: 3.33%;
}

#simple-lightbox .imageLink:nth-of-type(3) {
  margin-bottom: 0;
}


}
	<head>
	<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
	</head>

	<section class="galleryWrapper applyEvent">
	<h1 class="header">Click Image to Enlarge</h1>

	<div class="imageContainer clearfix">
	<a class="imageLink" href="https://s-media-cache-ak0.pinimg.com/736x/21/05/0f/21050f0d31602364e1de84e85e0e65e4.jpg" title="An iconic photo. The Trump's visting the first K Mart. You can see the dashless logo in the background.">
	<img class="image" src="https://s-media-cache-ak0.pinimg.com/736x/21/05/0f/21050f0d31602364e1de84e85e0e65e4.jpg" alt="An iconic photo. The Trump's visting the first K Mart. You can see the dashless logo in the background.">
	</a>
	<a class="imageLink" href="http://onakagasuita.info/wp-content/uploads/2014/12/K_Mart.jpg" title="Berlin Cathedral">
	<img class="image" src="http://onakagasuita.info/wp-content/uploads/2014/12/K_Mart.jpg" alt="The only known store front to actually feature a dash. Does it look anything like you remember?">
	</a>
	<a class="imageLink" href="https://i.ytimg.com/vi/cgnaWbPLAks/maxresdefault.jpg" title="There is a large gap between K and M. People remember a dash being here in the classic signage.">
	<img class="image" src="https://i.ytimg.com/vi/cgnaWbPLAks/maxresdefault.jpg" alt="There is a large gap between K and M. People remember a dash being here in the classic signage.">
	</a>
	<a class="imageLink" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6otNKs0UA-S1kDKJB03Ti_bF6-y8dFmmXJaqqZBVOdR75VAWi" title="Shoppers in front of K Mart not K-Mart.">
	<img class="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6otNKs0UA-S1kDKJB03Ti_bF6-y8dFmmXJaqqZBVOdR75VAWi" alt="Shoppers in front of K Mart not K-Mart.">
	</a>
	</div> <!-- /imageContainer-->

	<div class="overlayContainer">
	<div class="imageBox">
	<div class="relativeContainer">
	<img class="largeImage" src="" alt="">
	<p class="imageCaption"></p>
	</div> <!-- /relativeContainer -->
	</div> <!-- /imageBox -->
	</div> <!-- overlayContainer -->
	</section> <!-- /galleryWrapper -->
	(function() {

	var image = document.querySelectorAll('.imageLink'),
	overlay = document.querySelector('.overlayContainer'),
	largeImage = document.querySelector('.largeImage'),
	applyEvent = document.querySelector('.applyEvent'),
	caption = document.querySelector('.imageCaption'),
	display = new RegExp('(^\| )' + 'display' + '($\| )', 'g'),
	opacity = new RegExp('(^\| )' + 'opacity' + '($\| )', 'g'),
	href,
	alt;

	function lightbox(event) {
	event.preventDefault();
	href = this.getAttribute('href');
	alt = this.children[0].getAttribute('alt');

	largeImage.setAttribute('src', href);
	largeImage.setAttribute('alt', alt);
	caption.innerHTML = alt;
	overlay.className += ' display';

	setTimeout(function() { overlay.className += ' opacity'; }, 25);
	setTimeout(function() { overlay.addEventListener('click', hideOverlay, false); }, 400);
	}

	function hideOverlay() {
	overlay.removeEventListener('click', hideOverlay, false);
	overlay.className = overlay.className.replace(opacity, '');

	setTimeout(function() {
	largeImage.removeAttribute('src');
	largeImage.removeAttribute('alt');
	overlay.className = overlay.className.replace(display, '');
	}, 400);
	}


	/*Event Listener*/
	if ( applyEvent ) {
	for ( var i = 0; i < image.length; i++ ) {
	image[i].addEventListener('click', lightbox, false);
	}
	}

	})();
	#simple-lightbox {
	box-sizing: border-box;
	}

	#simple-lightbox {
	font-size: 100%;
	}

	#simple-lightbox {
	word-wrap: break-word;
	}

	#simple-lightbox ,
	#simple-lightbox .imageCaption {
	line-height: 1.4;
	}

	#simple-lightbox .clearfix::after {
	content: "";
	display: table;
	clear: both;
	}

	#simple-lightbox .galleryWrapper {
	font-size: 0.85rem;
	width: 90%;
	margin: 0 auto;
	}

	#simple-lightbox .galleryWrapper,
	#simple-lightbox .imageBox {
	max-width: 60rem;
	}

	#simple-lightbox .header {
	font: 2.1em 'Playfair Display', serif;
	margin: 1.25rem 0;
	}

	#simple-lightbox .imageBox,
	#simple-lightbox .header {
	text-align: center;
	}

	.imageContainer {
	padding: 0 0.5rem 1.25rem;
	}

	#simple-lightbox .imageLink {
	display: inline-block;
	}

	#simple-lightbox .imageLink,
	#simple-lightbox .imageBox {
	line-height: 0;
	}

	#simple-lightbox .imageLink:nth-of-type(-n+3) {
	margin-bottom: 0.8rem;
	}

	#simple-lightbox .imageBox,
	#simple-lightbox .largeImage,
	#simple-lightbox .image,
	#simple-lightbox .imageCaption {
	width: 100%;
	}

	#simple-lightbox .image,
	#simple-lightbox .largeImage {
	-webkit-transform: perspective(1px);
	-moz-transform: perspective(1px);
	transform: perspective(1px);
	}

	#simple-lightbox .overlayContainer {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 250;
	}

	#simple-lightbox .overlayContainer,
	#simple-lightbox .imageCaption {
	bottom: 0;
	}

	#simple-lightbox .relativeContainer {
	position: relative;
	margin: 0 0.5rem;
	}

	#simple-lightbox .imageBox,
	#simple-lightbox .imageCaption {
	position: absolute;
	}

	#simple-lightbox .imageBox {
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	}

	#simple-lightbox .display {
	display: block;
	}

	#simple-lightbox .imageCaption {
	margin: 0;
	font-size: 1.3em;
	padding: 0.325rem;
	}



	/*Colors*/
	#simple-lightbox {
	color: #333;
	}

	#simple-lightbox .galleryWrapper {
	background-color: #f2f2f2;
	border: 1px solid #333;
	}

	#simple-lightbox .imageLink {
	outline: none;
	-webkit-transition: all ease .2s;
	-moz-transition: all ease .2s;
	-o-transition: all ease .2s;
	transition: all ease .2s;
	}

	#simple-lightbox .imageLink:hover,
	#simple-lightbox .imageLink:focus {
	opacity: 0.8;
	}

	#simple-lightbox .overlayContainer {
	visibility: hidden;
	opacity: 0;
	background-color: rgba(51, 51, 51, .9);
	-webkit-transition: all ease .5s;
	-moz-transition: all ease .5s;
	-o-transition: all ease .5s;
	transition: all ease .5s;
	}

	#simple-lightbox .imageBox {
	cursor: pointer;
	}

	#simple-lightbox .largeImage {
	-webkit-box-shadow: 5px 5px 5px 0px rgb(0, 0, 0);
	-moz-box-shadow: 5px 5px 5px 0px rgb(0, 0, 0);
	box-shadow: 5px 5px 5px 0px rgb(0, 0, 0);
	}

	#simple-lightbox .imageCaption {
	background: rgba(51, 51, 51, .8);
	color: #fff;
	}

	#simple-lightbox .opacity {
	visibility: visible;
	opacity: 1;
	}



	@media only screen and (min-width: 30em) {

	#simple-lightbox .imageLink {
	float: left;
	width: 48.33%;
	}

	#simple-lightbox .imageLink:nth-of-type(1),
	#simple-lightbox .imageLink:nth-of-type(3) {
	margin-right: 3.33%;
	}

	#simple-lightbox .imageLink:nth-of-type(3) {
	margin-bottom: 0;
	}



	}