walterdavis/responsive-gallery.html

## responsive-gallery.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Responsive Slides</title>
  <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
  <style type="text/css" media="screen">
    body {
      background-color: #333;
      margin: 0;
      padding: 0;
    }
    #PageDiv {
      margin: 0;
      padding: 0;
      position: relative;
    }
    #thumbnails {
      font-size: 0;
    }
    #thumbnails img {
      width: 25%;
      height: 0;
      padding-bottom: 25%;
      display: inline-block;
      background-size: cover;
      background-position: center center;
      box-sizing: border-box;
      cursor: pointer;
      position: relative;
    }
    #thumbnails img.active{
      outline: solid #CBB91A 5px;
      outline-offset: -5px;
    }
    #main img {
      width: 100%;
      height: 0;
      padding-bottom: 95%;
      display: inline-block;
      background-size: cover;
      background-position: center;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
<div id="PageDiv">
  <div id="thumbnails">
    <img src="http://placekitten.com/700" alt="" />
    <img src="http://placekitten.com/700/800" alt="" />
    <img src="http://placekitten.com/700/600" alt="" />
    <img src="http://placekitten.com/700/900" alt="" />
  </div>
  <div id="main">

  </div>
</div>
<script type="text/javascript">
  var thumbnails = $('thumbnails').select('img');
  thumbnails.each(function(elm){
    elm.setStyle('background-image: url(' + elm.src.toString() + ')');
    elm.writeAttribute('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
    elm.observe('click', function(){
      thumbnails.invoke('removeClassName', 'active');
      $('main').update(elm.clone(true));
      elm.addClassName('active');
    });
  }).first().click();
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Responsive Slides</title>
	<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
	<style type="text/css" media="screen">
	body {
	background-color: #333;
	margin: 0;
	padding: 0;
	}
	#PageDiv {
	margin: 0;
	padding: 0;
	position: relative;
	}
	#thumbnails {
	font-size: 0;
	}
	#thumbnails img {
	width: 25%;
	height: 0;
	padding-bottom: 25%;
	display: inline-block;
	background-size: cover;
	background-position: center center;
	box-sizing: border-box;
	cursor: pointer;
	position: relative;
	}
	#thumbnails img.active{
	outline: solid #CBB91A 5px;
	outline-offset: -5px;
	}
	#main img {
	width: 100%;
	height: 0;
	padding-bottom: 95%;
	display: inline-block;
	background-size: cover;
	background-position: center;
	box-sizing: border-box;
	}
	</style>
	</head>
	<body>
	<div id="PageDiv">
	<div id="thumbnails">
	<img src="http://placekitten.com/700" alt="" />
	<img src="http://placekitten.com/700/800" alt="" />
	<img src="http://placekitten.com/700/600" alt="" />
	<img src="http://placekitten.com/700/900" alt="" />
	</div>
	<div id="main">

	</div>
	</div>
	<script type="text/javascript">
	var thumbnails = $('thumbnails').select('img');
	thumbnails.each(function(elm){
	elm.setStyle('background-image: url(' + elm.src.toString() + ')');
	elm.writeAttribute('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
	elm.observe('click', function(){
	thumbnails.invoke('removeClassName', 'active');
	$('main').update(elm.clone(true));
	elm.addClassName('active');
	});
	}).first().click();
	</script>
	</body>
	</html>