js selected pic on a div

by lemon kazi

HTML

<div class="img-large">

  <img class="image-gal" src="">

</div>

<div class="img-small">
  <img class="img-thumb" src="http://img1.sendscraps.com/se/008/068.jpg">
  <img class="img-thumb" src="http://www.pnas.org/site/misc/images/15-21077.500.jpg">
  <img class="img-thumb" src="http://www.alltechguide.net/wp-content/uploads/2015/04/good-morning-images.jpg">
</div>

CSS

img-large {}

.image-gal {
  height: 500px;
  width: 500px;
}

.img-small {
  width: 100%;
  border: 1px solid blue;
  height: 240px;
  margin: 20px;
}

.img-thumb {
  height: 200px;
  width: 200px;
  padding: 10px;
  cursor: pointer;
}

JavaScript

$(document).ready(function() {
  $('.img-small').on('click', '.img-thumb', function() {
    var src = $(this).attr('src');

    $('.image-gal').attr('src', src);
  });
});