Large Image / Thumbnail Slideshow

Simple slideshow from thumbnail with pure JavaScript

by Matthew Schenker

HTML

<div class="slideshow">
  <div class="large_image">
    <img id="large_image" src="http://goo.gl/phiUS" />
  </div>
  <ul class="thumbs">
    <img class="thumbnail" src="http://goo.gl/Cdfnd" onclick="ChangeImage('http://goo.gl/phiUS');" />
    <img class="thumbnail" src="http://goo.gl/VmUjM" onclick="ChangeImage('http://goo.gl/YLr0i');" />
  </ul>
</div>

<script>
  function ChangeImage(a) {
    document.getElementById("large_image").src = a;
  }
</script>

CSS

.large_image {
  width: 100%;
}

.slideshow ul li {
  display: inline;
}

.thumbnail {
  width: 15%;
}