Simple Image Gallery

Simple Image Gallery

HTML

<div id="gallery">
    <div id="panel">
        <img id="largeImage" class="lrg-16x12" src="https://cdn.dribbble.com/users/2120438/screenshots/5255849/rydoo_-_careers_1x_4x.jpg" alt="Rydoo   careers 1x 4x">
    </div>

    <div id="thumbs">
        <img class="lrg-16x12" src="https://cdn.dribbble.com/users/2120438/screenshots/5255849/rydoo_-_careers_1x_4x.jpg" alt="Rydoo   careers 1x 4x">
       <img class="lrg-16x12" src="https://cdn.dribbble.com/users/203446/screenshots/5253461/main_game_4x.png" alt="Main game 4x">
        <img class="med-8x6" src="https://cdn.dribbble.com/users/950870/screenshots/5254967/800-600.png" alt="800 600">
    </div>
</div>

SCSS

#gallery {
  text-al
}

#thumbs {
  padding-top: 10px;
  overflow: hidden;
  img {
    padding: 4px;
    background-color: white;
    cursor: pointer;
    text-align: center;
  }
}

#largeImage {
  padding: 4px;
  cursor: pointer;
}

#thumbs img {
  width: 150px;
  text-align: center;
}


.thumb-strip {
  background: black;
  color: white;
  position: absolute;
  bottom: 0;
  padding: 0;
  width: 100%;
  margin: 0;
}

#panel {
  position: relative;
  img {
    width: 500px;
  }
}

.thumb-wrap {
  position: relative;
  float: left;
}

JavaScript

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