kenwatanabe.info — Lightroom

by Ken Watanabe

HTML

<figure class="oneforth flux">
  <a href="#img1">
  <img src="https://s3.amazonaws.com/gschierBlog/images/pig-small.jpg" alt="" />
  </a>
</figure>

<a href="#_" class="lightbox" id="img1">
  <img src="https://s3.amazonaws.com/gschierBlog/images/pig-big.jpg">
  <article>image caption</article>
</a>

<figure class="oneforth flux">
  <a href="#img2">
  <img src="https://s3.amazonaws.com/gschierBlog/images/pig-small.jpg" alt="" />
  </a>
</figure>

<a href="#_" class="lightbox" id="img2">
  <img src="https://s3.amazonaws.com/gschierBlog/images/pig-big.jpg">
  <article>image caption</article>
</a>

<figure class="oneforth flux">
  <a href="#img3">
  <img src="https://s3.amazonaws.com/gschierBlog/images/pig-small.jpg" alt="" />
  </a>
</figure>

<a href="#_" class="lightbox" id="img3">
  <img src="https://s3.amazonaws.com/gschierBlog/images/pig-big.jpg">
  <article>image caption</article>
</a>

CSS

.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.8);
}

.lightbox img {
	max-width: 90%;
	max-height: 80%;
	margin-top: 2%;
}

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


html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; text-decoration: none; color: #F7F7F7; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0px; -webkit-margin-end: 0px; -webkit-padding-start: 0px; }
figure, div, img, section, article {  box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
html, body { height:100%; width:100%; font-size:100%; }
html, html a { -webkit-font-smoothing: antialiased; }
body { background: black; }

::-moz-selection{ background: #212121; color:#fff; text-shadow: none; }
::selection { background:#212121; color:#fff; text-shadow: none; }
a:link { -webkit-tap-highlight-color: #212121; }

.main { display: block; position:absolute; height:auto; bottom:0; top:0; left:0; right:0; margin:20px; }

body { font-family: 'Akzidenz Grotesk BE R', 'Helvetica-Neue', Arial, Helvetica; font-size: 1em; line-height: 1.4; letter-spacing: 1px; }
nav h1 { z-index: 1000000000; }
nav h1 { font-size:100%; padding:0; margin:0; position:fixed; } 
nav h1.left { top: 50%; left: 15px; -webkit-transform-origin: 50%; -moz-transform-origin: 50%; -ms-transform-origin: 50%; -o-transform-origin: 50%; transform-origin:...

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();