JSFiddle - React, Tailwind, and code Playground

by happierall

HTML

<div class="gallery">
  <div class="gallery-thumbs">
    <ul>
      <li class="thumb"><a><img src="http://lorempixel.com/300/200/sports" data-big="http://lorempixel.com/500/400/sports" data-orig="http://lorempixel.com/800/600/sports" alt="image" /></a></li>
      <li class="thumb"><a><img src="http://lorempixel.com/300/200/sports/1" data-big="http://lorempixel.com/500/400/sports/1" data-orig="http://lorempixel.com/800/600/sports/1" alt="image" /></a></i>
      <li class="thumb"><a><img src="http://lorempixel.com/300/200/sports/2" data-big="http://lorempixel.com/500/400/sports/2" data-orig="http://lorempixel.com/800/600/sports/2" alt="image" /></a></li>
      <li class="thumb"><a><img src="http://lorempixel.com/300/200/sports/3" data-big="http://lorempixel.com/500/400/sports/3" data-orig="http://lorempixel.com/800/600/sports/3" alt="image" /></a></li>
      <li class="thumb"><a><img src="http://lorempixel.com/300/200/sports/4" data-big="http://lorempixel.com/500/400/sports/4" data-orig="http://lorempixel.com/800/600/sports/4" alt="image" /></a></li>
    </ul>
  </div>
    
  <div class="gallery-images">
    <a class="big-image" id="big-img" onclick="return false" href="" rel="fancy">
        <div id="modal">
            <img src="" alt="" />
        </div>
    </a>
  </div>

</div>

CSS

.gallery {
    width: 800px;
    position: relative;
}
.gallery-thumbs {
    width: 230px;
    float:left;
    background: #ccc;
}
.gallery-thumbs ul li {
    width: 130px;
    height: 85px;
    float: left;
    margin-left: 6px;
    margin-bottom: 5px;
    overflow: hidden;
    cursor: pointer;
}
.gallery-thumbs img {
    width: 100%;
}

.gallery-images {
    width: 445px;
    float:left;
    margin: 50px;
}
.gallery-images img {
    width: 100%;
}

JavaScript

var thumb = $('.gallery-thumbs').find('.thumb').find('img'),
    link = $('.big-image'),
    container = link.find('img'),
    default_img = thumb.first().attr('data-big'),
    default_fancy = thumb.first().attr('data-orig');

    container.attr("src", default_img),
    link.attr("href", default_fancy);

thumb.click(function() {
    var img_link = $(this).attr('data-big'),
        fancy_img = $(this).attr('data-orig');

    container.fadeOut('slow', function() {
        container.attr("src", img_link)
        link.attr("href", fancy_img)
    });
    container.fadeIn('slow');
    return false;
});

$('#big-img').click(function () {
    console.log('eou');
    $('#modal').dialog({
        modal: true,
        resizable: false,
        dialogClass: 'no-close',
        width: 488,
    });
});