JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<div id="image_wrap">
  <!-- Initially the image is a simple 1x1 pixel transparent GIF -->
  <img src="images/blank.gif" width="500" height="375" rel="#mies1"/>
</div>

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




<div class="simple_overlay" id="mies1"><a class="close"></a>
  <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf.jpg"  />

  <div class="details">
    <h3>The Barcelona Pavilion</h3>
    <h4>Barcelona, Spain</h4>
 ...

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;
    background:url(../images/h300.png) repeat-x;
}

/*
   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 {
    background:url(../images/hori_large.png) no-repeat;
    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...

JavaScript

$(function() {
$(".scrollable").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

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