JSFiddle - React, Tailwind, and code Playground

by zaebal

HTML

<div class="gallery">
         <div class="view">
             <div style="border:3px dotted black;">
                <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

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