Simple Image Gallery

Simple Image Gallery

by Matthew Schenker

HTML

<div id="gallery">
  <div id="panel">
    <img id="largeImage" src="http://workshop.rs/demo/gallery-in-4-lines/images/image_01_large.jpg" />
    <div id="description">Description 1</div>
  </div>

  <div id="thumbs">
    <img src="http://workshop.rs/demo/gallery-in-4-lines/images/image_01_thumb.jpg" alt="description1" />
    <img src="http://workshop.rs/demo/gallery-in-4-lines/images/image_02_thumb.jpg" alt="description2" />
    <img src="http://workshop.rs/demo/gallery-in-4-lines/images/image_03_thumb.jpg" alt="description3" />
  </div>
</div>

CSS

#thumbs {
  padding-top: 10px;
  overflow: hidden;
}

#thumbs img,
#largeImage {
  border: 1px solid gray;
  padding: 4px;
  background-color: white;
  cursor: pointer;
}

#thumbs img {}

#description {
  background: black;
  color: white;
  position: absolute;
  bottom: 0;
  padding: 10px 20px;
  width: 525px;
  margin: 5px;
}

#panel {
  position: relative;
}

JavaScript

$('#thumbs').delegate('img', 'click', function() {
  $('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large'));
  $('#description').html($(this).attr('alt'));
});