JSFiddle - React, Tailwind, and code Playground

by jnfsmile

HTML

<body>
<div id="gallery">
<div id="main">
    <img id="main_img" src="https://farm4.staticflickr.com/3929/15415990882_4c1968e93b_b.jpg" alt=""/></div>
    <div id="thumbnail">
    <ul>
        <li><img class="thumb" id="long" src="https://farm4.staticflickr.com/3929/15415990882_4c1968e93b_b.jpg"/></li>
                <li><img class="thumb" id="long" src="https://farm9.staticflickr.com/8460/7986815071_1a90eef50e_b.jpg"/></li>
         <li><img class="thumb" id="long" src="https://farm4.staticflickr.com/3929/15415990882_4c1968e93b_b.jpg"/></li>
                <li><img class="thumb" id="long" src="https://farm9.staticflickr.com/8460/7986815071_1a90eef50e_b.jpg"/></li>
        <li><img class="thumb" id="long" src="https://farm4.staticflickr.com/3929/15415990882_4c1968e93b_b.jpg"/></li>
        <li><img class="thumb" id="long" src="https://farm9.staticflickr.com/8460/7986815071_1a90eef50e_b.jpg"/></li>
        <li><img class="thumb" id="long" src="https://farm4.staticflickr.com/3929/15415990882_4c1968e93b_b.jpg"/></li>
    </ul>   
    </div>
</div>
</body>

CSS

#thumbnail::-webkit-scrollbar  { border-radius:10px;	background: white; height:10px;}
#thumbnail::-webkit-scrollbar-thumb{border-radius:10px; -webkit-box-shadow: inset 0 0 6px black;}
#thumbnail::-webkit-scrollbar-track{ border-radius: 10px; -webkit-box-shadow: inset 0 0 1px black;}


#gallery li {
	margin:auto;
	max-width: 1000px;
	display:inline;
}
#gallery #main_img{
	border:5px solid black;
	border-radius:40px;
	padding:10px;
	max-width:100%;
	max-height: 100%;
	margin:auto;
}
#galler ul{
position:relative;
display:inline;
margin:auto;

}

#thumbnail{
	float:left;
	overflow: scroll;
	overflow-y:hidden;
	white-space:nowrap;
	max-width:1000px;
	margin:auto;
	max-height:100px;
}

/* adjust thumbnail sizes */
#tall{
	height:60px;
	width:50px;
	border-radius:10px;
}
 #long{
	height:50px;
	width:60px;
	border-radius: 10px;
}

JavaScript

$(document).ready(function(){
	
	//these are static
		var $first = $('li:first img', '#gallery ul');
		var $last = $('li:last img', '#gallery ul');
	//set to current selected image	to be displayed
		var current = $first;	
		var previousImage = current;
	
	runGallery(current, $first, $last, previousImage);
	
});

$.fn.preload = function(){
	this.each(function(){
		$('<img/>')[0].src=this;
	});
}

  
	function getNextPic(current, first, last, boolval)
	{
		var next = $(current).closest('li');
		
		if(boolval===true)
		{
			if(current[0] === last[0])
			{
				next = first;//this seems to never happen???
			}
			else
			{
				next = $(next).next('li');
				next =  $(next).find('img');
			}
		}
		else
		{
			if(current[0] === first[0])
			{
				next = last;//this also never happens
			}
			else
			{
			next = $(next).prev();
			next = $(next).find('img');
			}
		}
		
		return next;
	}
  function fade(current, previous)
	{
		$(previous).fadeTo('fast',1);
		$(current).fadeTo('fast', 0.5);
	}
  	function runGallery($current, $first, $last, previousImage){
	//first and last thumbnails, selected and current			
		$("body").keydown(function(e){
			// left arrow pressed
			if ((e.keyCode || e.which) == 37)
			{   $current = getNextPic($current, $first, $last, false);//false gets previous img, true gets following img
		
				fade($current, previousImage);//fade selected, unfade previously selected
				previousImage=$current;
				
				var newlink = $($current).attr('src').replace('thumb/', '');
				$('#main_img').attr('src', newlink);//set $current to main_img
			}
			// right arrow pressed
			if ((e.keyCode || e.which) == 39)
			{
				$current = getNextPic($current, $first, $last, true);
				
				fade($current, previousImage);
				previousImage=$current;
				
				var newlink = $($current).attr('src').replace('thumb/', '');
				$('#main_img').attr('src', newlink);
			}   
		});

		//gallery maker
		$("#gallery li img").click(function()
		{
		//fade selected and unfade previous...