JSFiddle - React, Tailwind, and code Playground

by uksamson

HTML

<div id="container">
    <div>Visual Area</div>
<div id="thumbs_inner">
<ul id="thumbs_ul">         
    <li><img class='img_thumb' alt="1" src="http://img513.imageshack.us/img513/5321/85208619.jpg" /></li> 
    <li><img class='img_thumb' alt="2" src="http://img15.imageshack.us/img15/9899/99898645.jpg" /></li> 
    <li><img class='img_thumb' alt="3" src="http://img15.imageshack.us/img15/9899/99898645.jpg" /></li> 
    <li><img class='img_thumb' alt="4" src="http://img254.imageshack.us/img254/176/99598733.jpg" /></li> 
    <li><img class='img_thumb' alt="5" src="http://img848.imageshack.us/img848/4374/40251963.jpg" /></li> 
    <li><img class='img_thumb' alt="6" src="http://img823.imageshack.us/img823/285/14346927.jpg" /></li> 
    <li><img class='img_thumb' alt="7" src="http://img6.imageshack.us/img6/1889/55045172.jpg" /></li> 
    <li><img class='img_thumb' alt="8" src="http://img846.imageshack.us/img846/5859/92365169.jpg" /></li> 
    <li><img class='img_thumb' alt="9" src="http://img850.imageshack.us/img850/3708/39711038.jpg" /></li> 
    <li><img class='img_thumb' alt="10" src="http://img252.imageshack.us/img252/8348/50917728.jpg" /></li> 
    <li><img class='img_thumb' alt="11" src="http://img809.imageshack.us/img809/5936/50022894.jpg" /></li> 
    <li><img class='img_thumb' alt="12" src="http://img37.imageshack.us/img37/1925/24820377.jpg" /></li> 
    <li><img class='img_thumb' alt="13" src="http://img27.imageshack.us/img27/2894/79080558.jpg" /></li> 
    <li><img class='img_thumb' alt="14" src="http://img100.imageshack.us/img100/125/73208297.jpg" /></li> 
    <li><img class='img_thumb' alt="15" src="http://img263.imageshack.us/img263/6951/73706233.jpg" /></li> 
</ul>
<div id="prev">Prev</div>
<div id="next">Next</div>
</div>
</div>
<div id="info"></div>

CSS

#info{
    clear:both;
    border:solid 1px #222;
    color:#000;
    display:inline-block;
    width:635px;
    height:200px;
    margin-left:220px;
    margin-top:20px;  
}
#container{
    margin-left:220px;
    margin-top:20px;   
    width:635px; 
    height:200px;
    color:#FFF;background:#333;
    text-align:center; 
    border: 2px solid #333;    
}
#thumbs_inner {
    float:left;
    width:635px; 
    /*overflow: hidden;*/ /* commented out to show thumbs outside visual area */
    /* temp styling */
    background: #000;
}

#thumbs_ul {
    position:relative;
    left:-93px;
    list-style-type:none;
    width:9999px;
}
#thumbs_ul li{
    float:left;
    width:75px;
    height:50px;
    cursor:pointer;
    cursor: hand;
    margin-top:10px;
    margin-bottom:10px;
    margin-left:0px;
    margin-right:18.35px;
    text-align:center;
    background: #292929;
}
#thumbs_ul li img {
    .margin-bottom:-4px;
    /* temp  styling */
    cursor:pointer;
    cursor: hand;
    border:0px;
}
.img_thumb{
    display:none;
}
#prev{
    clear:both;
    color: #FFF;
    float:left;
    margin:20px;
    cursor: pointer;
    cursor: hand;
}
#next{
    color: #FFF;
    float:right;
    margin:20px;
    cursor: pointer;
    cursor: hand;
}

JavaScript

$(document).ready(function() {    
    offset_amount = "-93px";     
    $('#next').click(function(){
        var item_width = $('#thumbs_ul li').outerWidth();
        var left_indent = parseInt($('#thumbs_ul').css('left')) - item_width;
        $('#thumbs_ul:not(:animated)').animate({'left' : left_indent},100,function(){    
            $('#thumbs_ul li:last').after($('#thumbs_ul li:first')); 
            $('#thumbs_ul').css({'left' : offset_amount});
        }); 
    });
    $('#prev').click(function(){
        var item_width = $('#thumbs_ul li').outerWidth();
        var left_indent = parseInt($('#thumbs_ul').css('left')) + item_width;
        $('#thumbs_ul:not(:animated)').animate({'left' : left_indent},100,function(){              
            $('#thumbs_ul li:first').before($('#thumbs_ul li:last')); 
            $('#thumbs_ul').css({'left' : offset_amount});
        });
    });
    $("#thumbs_ul li").bind('click', function(){
        tindex = $('#thumbs_ul li').index(this);
        $('#info').html('Clicked on '+tindex);
        for (var i=1; i<tindex ; i++) {
            $('#thumbs_ul li:last').after($('#thumbs_ul li:first'));
        }
    });
});

$(".img_thumb").one('load', function() {
    var maxWidth = 75 
    var maxHeight = 50  
    var width = $(this).width();    
    var height = $(this).height();  
    $(this).css("width", "auto").css("height", "auto"); 
    $(this).removeAttr("width").removeAttr("height"); 
    
    ratio1 = maxWidth / width;
    ratio2 = maxHeight / height;
    if(ratio1 > ratio2){
            ratio = ratio2;
    }else{
            ratio = ratio1;
    }
    var newWidth = Math.round(width * ratio);
    var newHeight = Math.round(height * ratio);
    
    $(this).css("height", newHeight);   
    $(this).css("width", newWidth);   
    $(this).css("line-height", newHeight);
    $(this).css("padding-top", (50 - newHeight) / 2);
    
    $(".img_thumb").fadeIn(2000);
    }).each(function() {
    if(this.complete) $(this).load();
});