JSFiddle - React, Tailwind, and code Playground

by thayes

HTML

<div id="page">
    <div id="info">
        
    </div>
    <div id="images">
        <ul id="imagelist">
            <li data-url="http://placekitten.com/1024/768">
            </li>
        </ul>
        <div id="imagecontainer">
            
        </div>
    </div>
<p>Content below</p>
</div>

CSS

#page {
    height: 100%;
    width: 100%;
}

#info {
    width: 100%;
    height: 80px;
    border: 1px solid black;
    margin-bottom: 2em;
}

#images {
    width: 100%;
    height: 100%;
    border: 2px solid red;
    overflow: auto;
}

#imagecontainer {
    width: 100%;
    height: 100%;
    border: 2px solid blue;
    background-color: #FCFCFC;
    background-size: cover;
    -webkit-transform-origin: 0 0;
}

JavaScript

$(document).ready(function() {
    var $images = $('#imagelist > li');
    
    var url = $($images.get(0)).data('url');
    
    $('#imagecontainer')/*.css({
        'background-image': 'url(' + url + ')'
    })*/
    .empty()
    .append(
        $('<img />')
            .attr('src', url)
    )
    .dblclick(function() {
        var scale = $(this).data('scale') || 1;
        
        if(scale === 1) {
            scale = 2;
        }
        else {
            scale = 1;
        }
        
        $(this).css({
            '-webkit-transform': 'scale(' + scale + ')'
        })
        .data('scale', scale)
        .parent().css({
            'height': $(this).height() * scale
        });
    });
});