JSFiddle - React, Tailwind, and code Playground

by Alexander Startsev

HTML

<div class="gallery">
         <div class="view">
         <div><img src="http://cs314728.vk.me/v314728849/1093/th01alTGpIE.jpg"/></div>
         </div>
         <div class="preview">
         <div><img src="http://upload.wikimedia.org/wikipedia/commons/e/e5/Augsburg_Tram_1.svg"/></div>
         <div><img src="http://parallel.ru/sites/default/files/images/computers/cray1_big.jpg"/></div>
         <div><img src="http://cs307912.vk.me/u197000/video/l_84c13dc1.jpg"/></div>
         <div><img src="http://cs418623.vk.me/v418623849/4cb1/DaXoQsD2mNM.jpg"/></div>
         <div><img src="http://cs418623.vk.me/v418623849/4c64/rmOls2Sv2dA.jpg"/></div>
         <div><img src="http://cs305114.vk.me/v305114684/7ab5/ibKwAzvs8ks.jpg"/></div>
         <div><img src="http://cs305114.vk.me/v305114684/7ac7/ZmmIJPXcVuA.jpg"/></div>
         </div>
</div>

CSS

.view
{
width: 540px;
height: 400px;
overflow: hidden;
float: left;
cursor: pointer;
}
.preview
{
width: 300px;
float: right;
margin-left: 10px;
cursor: pointer;
}
.view div img, .preview div img
{
width: 100%;
}
.view div
{
width: 540px;
height: 100%;
}
.preview div
{
width: 300px;
max-height: 50px;
overflow: hidden;
}

JavaScript

$(function(){
    $('.preview').on("click", "div", function(){
        $('.view div').animate({height: 'hide'}, 300, function(){
            $(this)
            .css({'width': '300px', 'height': '70px'})
            .appendTo('.preview')
            .slideDown(600)
        });
        $(this).animate({"height": "hide"}, 300, function(){
            $(this)
            .css({'width': '540px', 'height': '100%'})
            .prependTo('.view')
            .slideDown(600);
        });
    });
});