JSFiddle - React, Tailwind, and code Playground

by Kalu Singh Rao

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...

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...

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...