JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<div id="image_wrap">

    <!-- Initially the image is a simple 1x1 pixel transparent GIF -->
    <img src="images/transparent.gif" width="500" height="300" />

</div>

<div id="demo">
<!-- "previous page" action -->
                <a class="prev browse left"></a>
                

<!-- root element for scrollable -->
                    <div class="scrollable">
   
   <!-- root element for the items -->
                           <div class="items">
   
      <!-- 1-5 -->
                              <div>
                             <img src="images/hot-presses/xl/xl4-thumb.png" alt="images/hot-presses/xl/xl4.png" title="XL/4  Hydraulic Hot Press for Woodworking Products." />
                             <img src="images/hot-presses/xl/xl6-thumb.png" alt="images/hot-presses/xl/xl6.png" title="XL/6  Hydraulic Hot Press for Woodworking Products." />
                             <img src="images/hot-presses/xl/xl8-thumb.png" alt="images/hot-presses/xl/xl8.png" title="XL/8  Hydraulic Hot Press for Woodworking Products." />
                             <img src="images/hot-presses/xl/xl10-thumb.png" alt="images/hot-presses/xl/xl10.png" title="XL/10  Hydraulic Hot Press for Woodworking Products." />
                            </div>

      
      <!-- 5-10 are between new divs 10-15 ar between another set of divs -->
                            <div>
                             <img src="images/hot-presses/xl/xl4-thumb.png" alt="images/hot-presses/xl/xl4.png" title="XL/4  Hydraulic Hot Press for Woodworking Products." />
                             <img src="images/hot-presses/xl/xl6-thumb.png" alt="images/hot-presses/xl/xl6.png" title="XL/6  Hydraulic Hot Press for Woodworking Products." />
                             <img...

CSS

#image_wrap {
        /* dimensions */
        width:560px;
        margin:15px;
        padding:15px 0px;

        /* centered */
        text-align:center;

        /* some "skinning" */
        background-color:#efefef;
        border:2px solid #fff;
        outline:1px solid #ddd;
        -moz-ouline-radius:4px;
    }




.scrollable {
    /* required settings */
    position: relative;
    overflow: hidden;
    width: 490px;
    height: 98px; /* custom decorations */;
    border: 1px solid #fff;
    background: url(/images/h300.png) repeat-x;
    background-color:#e6e6e6;
}

/*
    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;
    
}

.items div {
    float: left;
    width: 490px;
    margin: 0px 0px 0px 14px;
    padding-top: 9px;
    padding-right: 7px;
    padding-bottom: 3px;
    padding-left: 3px;
    height: 90px;
}

/* single scrollable item */
.scrollable img {
    float: left;
    margin: 0px 2px 0px 2px;
    background-color: #fff;
    padding: 2px;
    border: 1px #666666 solid;
    width: 100px;
    height: 75px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

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

/* remove margins from the image */
    .items img {
        margin:0;
    }
    
    /* make A tags our floating scrollable items */
    .items a {
        display:block;
        float:left;
        margin:0px 0px;
    } 
    
        
    
        

/* tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {
    display:none;
    background:transparent url(images/black_arrow.png);
    font-size:12px;
    height:70px;
    width:160px;
   ...

JavaScript

$(function() {

$(".scrollable").scrollable();

$("#demo img[title]").tooltip();

$(".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("alt");

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

    // 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);

    };

    // 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();
});