JSFiddle - React, Tailwind, and code Playground

by Adam Azad

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="contairner">
    <div class="row">
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-body">
                    <img id="imgHighRes" src="http://placehold.it/500x300&text=High Res 1" class="img-rounded" />
                </div>
            </div>
        </div>
        <div id="thumbsSet" class="col-md-2">
            <div class="panel panel-default">
                <div class="panel-body">
                    <img src="http://placehold.it/100x100&text=Thumb 1" data-high-res="http://placehold.it/500x300&text=High Res 1" class="img-rounded" />
                    <img src="http://placehold.it/100x100&text=Thumb 2" data-high-res="http://placehold.it/500x300&text=High Res 2" class="img-rounded" />
                    <img src="http://placehold.it/100x100&text=Thumb 3" data-high-res="http://placehold.it/500x300&text=High Res 3" class="img-rounded" />
                    <img src="http://placehold.it/100x100&text=Thumb 4" data-high-res="http://placehold.it/500x300&text=High Res 4" class="img-rounded" />
                </div>
            </div>
        </div>

CSS

body {
    padding: 10px;
}

JavaScript

$(document).ready(function () {
    $('#thumbsSet img').click(function () {
        var $element = $(this),
            $highResImg = $element.data('high-res');
        $('#imgHighRes').attr('src', $highResImg);
    });
});