JSFiddle - React, Tailwind, and code Playground

by nightcoregirl

HTML

<section>

  <span>
    <div id="thumbnails">
      <img class="thumb" src="http://41.media.tumblr.com/b75d5d6fee3a855876651a30ff19030a/tumblr_n8sltrQE641qae9tio1_500.jpg" data-target="0"/> 
      <img class="thumb" src="http://40.media.tumblr.com/9b63e30a2e4129f49a850b2bd2917427/tumblr_nhiyppPqJu1rbwn97o1_500.jpg" data-target="1"/> 
      <img class="thumb" src="http://41.media.tumblr.com/c6436369c4d79198f087cd4708a0a0c1/tumblr_njexllsWCc1sds01ao1_500.jpg" data-target="2"/> 
    </div>

    
    <ul id="content" class="gallery">
      <li class="pic">     
      <img src="http://41.media.tumblr.com/b75d5d6fee3a855876651a30ff19030a/tumblr_n8sltrQE641qae9tio1_500.jpg"/> 
    </li>
      
      <li class="pic"> 
        <img src="http://40.media.tumblr.com/9b63e30a2e4129f49a850b2bd2917427/tumblr_nhiyppPqJu1rbwn97o1_500.jpg"/> 
      </li>
      
      <li class="pic"> 
        <img src="http://41.media.tumblr.com/c6436369c4d79198f087cd4708a0a0c1/tumblr_njexllsWCc1sds01ao1_500.jpg"/> 
      </li>
    </ul>
  </span>

</section>

CSS

li {
  list-style-type:none
}

* {
  margin:0;
  padding:0
}

#content {
  margin:0;
  padding:0;
  width:560px;
  float:left;
  clear:both;
  position:relative;
  height:500px
}

#content li {
  width:560px
}

#content.gallery li {
  opacity:0;
  position:absolute;
  left:0;
  top:0;
  -webkit-transition:all .3s ease;
  -moz-transition:all .3s ease;
  -o-transition:all .3s ease;
  transition:all .3s ease
}

#content li:hover {
  cursor:pointer
}

#content li.opened {
  opacity:1
}

#content li img {
  width:100%;
  height:auto
}

section {
  position:fixed;
/*top:0;*/
  display:flex;
  min-height:100vh;
  min-width:100vw;
  align-items:center;
  justify-content:center
}

#thumbnails {
  float:left
}

#thumbnails img {
  width:100px;
  display:inline-block;
  margin:5px
}

#thumbnails img:hover {
  cursor:pointer;
  opacity:.6;
  -webkit-filter:saturate(35%)
}

JavaScript

$('.thumb').on("click", function(e) {
  var target = $(this).data('target');
  $('.gallery').children().eq( target ).addClass('opened').siblings().removeClass('opened');
});

$('.thumb:first').click();


$(".next, .gallery li").on("click", function(e){
  e.preventDefault();     
  var nextthing = $("#content li.opened").next('li');
  
  if ( !nextthing.length) {
    nextthing = $("#content li:first");
  }
  nextthing.addClass("opened").siblings().removeClass('opened');
});