Lightbox 002

by Ken Watanabe

HTML

<figure class="flux w_twosixth h_medium">  
<a href="#img1" class="thumbnail">
   <p class="rotate">01 / 05</p>
  <img src="http://2x4.org/directus/media/thumbnails/2cfa0fdea03e2f2baa0e270de026ec0e.jpg?w=300&h=5000&c=false" alt="" />
</a>

<a href="#_" class="lightbox" id="img1">
 <img src="http://2x4.org/directus/media/thumbnails/2cfa0fdea03e2f2baa0e270de026ec0e.jpg?w=300&h=5000&c=false" alt="" />
</a>

<p class="thumbnail.caption">A1</p>
</figure>

CSS

figure { float:left; padding:20px; display:block; }
.w_twosixth { width:33.3333333332%; }
.h_medium { height:10em; }



.lightbox {
	display: none;
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.9);
}

img { width:auto; height:100% }

.lightbox img {
	max-width: 100%;
	max-height: 100%;
 position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}

.lightbox:target {
	outline: none;
	display: block;
}

JavaScript

function randomize() {
	    var elts = document.querySelectorAll('.flux');
	    var array = Array.prototype.slice.call(elts);
	    array.forEach(function(elt) {
	        elt.style.textAlign = getDirection();
	    });
	}
	
	function getDirection() {
	    var roll = Math.random();
	    if (roll < 0.33) { return 'left'; }
	    else if (roll > 0.66) { return 'right'; }
	    //return 'center';
	}
	randomize();