JSFiddle - React, Tailwind, and code Playground

by colintoh

HTML

<div id="box">
</div>
<div id="imageBox">
    <ul>
        <li id='image1' class='image'><img src="http://www.reforgingamerica.com/wp-content/uploads/2011/02/Obama-Change-2.jpg"><p>Obama</p></li>
        <li id='image2' class='image'><img src="http://www.reforgingamerica.com/wp-content/uploads/2011/02/Obama-Change-2.jpg"><p>Obama</p></li>
        <li id='image3' class='image'><img src="http://www.reforgingamerica.com/wp-content/uploads/2011/02/Obama-Change-2.jpg"><p>Obama</p></li>
        <li id='image4' class='image'><img src="http://www.reforgingamerica.com/wp-content/uploads/2011/02/Obama-Change-2.jpg"><p>Obama</p></li>
        <li id='image5' class='image'><img src="http://www.reforgingamerica.com/wp-content/uploads/2011/02/Obama-Change-2.jpg"><p>Obama</p></li>
    </ul>
</div>

CSS

#box{
    width:100px;
    height:100px;
    background:#aaa;
    position:absolute;
        top:175px;
    left:430px;
}

#imageBox{
    position:absolute;
    left:200px;
    top:100px;
    /*-moz-transition:300ms linear;
    -webkit-transition:300ms linear;*/
    background:rgba(0,0,0,0.3);
}

ul{
    overflow:hidden;
    padding:125px 25px 25px;
    
}

li{
    float:left;
    width:100px;
    margin-top:0;
    margin-left:-5px;
    margin-right:-5px;
    background:#fff;
    box-shadow:0 0 5px #000;
    -moz-transition:1000ms margin cubic-bezier(1.000, 0.000, 0.000, 1.000);
    -webkit-transition:1000ms margin cubic-bezier(1.000, 0.000, 0.000, 1.000),200ms box-shadow cubic-bezier(1.000, 0.000, 0.000, 1.000);
    top:175px;
    
}

li img{
    width:100%;
}

li p{
    height:0;
    overflow:hidden;
    text-align:center;
    -moz-transition:1000ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
    -webkit-transition:1000ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
}

li.nonactive{
    margin:0 -5px;
}

li.active{
    box-shadow:0 0 15px #ff0000;
    margin:-25px 25px 0 25px;
}

.active>p{
    height:25px;
}

.full {
    position:absolute;
    top:0;
}

JavaScript

var ww = $(window).width();
var imageLength = parseFloat($('.image').length);

setTimeout(function() {
    $('li:eq(2)').addClass('active');
}, 500)


$(window).keypress(function(e) {
    if (e.which == '32') {
        $('li.active').addClass('full').css('width', ww);
    }
})

$(window).keydown(function(e) {
    if (e.keyCode == '39') {
/*$('#imageBox').css('left', function(index, value) {
            return parseFloat(value) - 90 + 'px';
        });*/
        var gh = parseFloat($('#imageBox').css('left')) - 90 + 'px';
        alert(gh);
        $('#imageBox').animate({
            'left': gh
        }, 500, function() {
            $('#imageBox').css('left', gh);
                            alert($('#imageBox').css('left'));
        });
        if ($('li.active').next().length) {
            var c = $('li.active').removeClass('active').next().addClass('active');
/*setTimeout(function() {
                c.addClass('active')
            }, 500);*/
        }
        else {
            $('#imageBox').css('left', function(index, value) {
                var val = parseFloat(value) + (imageLength) * 90;
                return val;
            });
            $('li.active').removeClass('active').parent().find('li').first().addClass('active');
        }
    }
    else if (e.keyCode == '37') {
        $('#imageBox').css('left', function(index, value) {
            return parseFloat(value) + 90 + 'px';
        });
        if ($('li.active').prev().length) {
            var c = $('li.active').removeClass('active').prev().addClass('active');
        }
        else {
            $('#imageBox').css('left', function(index, value) {
                var val = parseFloat(value) - (imageLength) * 90;
                return val;
            });
            $('li.active').removeClass('active').parent().find('li').last().addClass('active');
        }
    }
})