Using Data attributes to switch src of a gallery image

by Luke Pearce

HTML

<div class="gallery">
    <img id="gallery__img" src="http://placehold.it/300x300&text=photo1" alt="" />
</div>

<ul class="thumb__list">
    <li class="thumb__item" data-bigimg="http://placehold.it/300x300&text=photo1">
        <img src="http://placehold.it/100x100&text=photo1" />
    </li>
    <li class="thumb__item" data-bigimg="http://placehold.it/300x300&text=photo2">
        <img src="http://placehold.it/100x100&text=photo2" />
    </li>
    <li class="thumb__item" data-bigimg="http://placehold.it/300x300&text=photo3">
        <img src="http://placehold.it/100x100&text=photo3" />
    </li>
</ul>

CSS

.thumb__list {
    list-style: none;
    margin: 0;
    -webkit-padding-start: 0px;
}
.thumb__item {
    cursor: pointer;
    margin-bottom: 20px;
    display: inline-block;
}

JavaScript

$(document).on('click', '.thumb__item', function () {

    var img_src = $(this).attr('data-bigimg');

    $("#gallery__img").attr("src", img_src).fadeIn(200);

});