JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<input type="button" disabled=true class="prevImg" value="PREV" />
<input type="button" class="nextImg" value="NEXT" />
<p id="imageCounter"></p>
<div id="image_wrap">
  <!-- Initially the image is a simple 1x1 pixel transparent GIF -->
  <img style="width:500px;height:375px" rel="#mies1"/>
</div>

<!-- HTML structures -->
<div style="margin:0 auto; width: 634px; height:120px;">
<!-- "previous page" action -->
<a class="prev browse left">PREV</a>

<!-- root element for scrollable -->
<div class="scrollable" id="scrollable">

  <!-- root element for the items -->
  <div class="items">

    <!-- 1-5 -->
    <div>
      <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" relo="#mies1" />
      <img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" relo="#mies2"/>
      <img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
      <img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
    </div>

    <!-- 5-10 -->
    <div>
      <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
      <img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
      <img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
      <img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
    </div>

    <!-- 10-15 -->
    <div>
      <img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
      <img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
      <img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
      <img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
    </div>

  </div>

</div>

<!-- "next page" action -->
<a class="next browse right">NEXT</a>
</div>

<div class="simple_overlay" id="mies1"><a class="close"></a>
  <img...

CSS

body {
    padding:50px 80px;
    font-family:"Lucida Grande","bitstream vera sans","trebuchet ms",sans-serif,verdana;
}

/* get rid of those system borders being generated for A tags */
a:active {
    outline:none;
}

:focus {
    -moz-outline-style:none;
}

/*
  root element for the scrollable.
  when scrolling occurs this element stays still.
  */
.scrollable {

    /* required settings */
    position:relative;
    overflow:hidden;
    width: 550px;
    height:120px;

    /* custom decorations */
    border:1px solid #ccc;
}

/*
   root element for scrollable items. Must be absolutely positioned
   and it should have a extremely large width to accomodate scrollable
   items.  it's enough that you set the width and height for the root
   element and not for this element.
*/
.scrollable .items {
    /* this cannot be too large */
    width:20000em;
    position:absolute;
    clear:both;
}

.items div {
    float:left;
    width:680px;
}

/* single scrollable item */
.scrollable img {
    float:left;
    margin:20px 5px 20px 21px;
    background-color:#fff;
    padding:2px;
    border:1px solid #ccc;
    width:100px;
    height:75px;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;
}

/* active item */
.scrollable .active {
    border:2px solid #000;
    position:relative;
    cursor:default;
}



/* this makes it possible to add next button beside scrollable */
.scrollable {
    float:left;
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
    display:block;
    width:30px;
    height:30px;
    float:left;
    margin:40px 10px;
    cursor:pointer;
    font-size:1px;
}

/* right */
a.right { background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover { background-position:-30px -30px; }
a.right:active { background-position:-60px -30px; }


/* left */
a.left { margin-left: 0px; }
a.left:hover  { background-position:-30px 0; }
a.left:active { background-position:-60px 0; }

/* up and down */
a.up, a.down  {
    float: none;
...

JavaScript

$(function() {
$(".scrollable").scrollable();
var scrollapi = $(".scrollable").data("scrollable");

$(".items img").click(function() {
	// see if same thumb is being clicked
	if ($(this).hasClass("active")) { return; }
	

	// calclulate large image's URL based on the thumbnail URL (flickr specific)
	var url = $(this).attr("src").replace("_t", "");


	// get handle to element that wraps the image and make it semi-transparent
	var wrap = $("#image_wrap").fadeTo("medium", 0.5);
	var wrap2 = $("#mies1");

	// the large image from www.flickr.com
	var img = new Image();


	// call this function after it's loaded
	img.onload = function() {

		// make wrapper fully visible
		wrap.fadeTo("fast", 1);

		// change the image
		wrap.find("img").attr("src", url);
		wrap2.find("img").attr("src", url);
	};

	// begin loading the image from www.flickr.com
	img.src = url;

	// activate item
	$(".items img").removeClass("active");
	$(this).addClass("active");

// when page loads simulate a "click" on the first image
}).filter(":first").click();

// This makes the image Overlay with a div and html

      $("img[rel]").overlay({
      		// some mask tweaks suitable for modal dialogs
      		mask: {
        		color: '#ebecff',
        		loadSpeed: 200,
        		opacity: 0.9
      		},
    		closeOnClick: true
  		});

    	$(".nextImg").click(function(){
    		// Count all images
    		var count = $(".items img").length;
    		
    		var next = $(".items").find(".active").next("img");
    		if(next.is(":last")){
    			next = $(".items").find(".active").parent().next("div").find("img:first");
    			if(next.index() == -1){
    				// We have reached the end - start over.
					next = $(".items img:first");
    				scrollapi.begin(200);
    			} else {
    				scrollapi.next(200);
    			}
    		}

    		// Get the current image number
            var current = (next.index("img"));

    		var nextUrl = next.attr("src").replace("_t", "");

    		// get handle to element that wraps the...