Dressanizer

by Patrick von Lieres

HTML

<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
<div id="sidepanel-container" class="shadow">
        <div id="containment-wrapper">
            <div class="toggle">
                <a class="toggle-link" href="javascript:;">
                    Outfit ansehen
                </a>
            </div>

            <div class="draggable resizable" style="top: 15%;left: 2%;">
                <img src="http://adlermode.medienwerft.de/content/test/83321080t.png" />
            </div>
            <div class="draggable resizable" style="top: 25%;left:  17%;">
                <img src="http://adlermode.medienwerft.de/content/test/73540153t.png" />
            </div>
            <div class="draggable resizable" style="top: 15%;left: 30%;">
                <img src="http://adlermode.medienwerft.de/content/test/98983068t.png"  />
            </div>

            <div class="draggable resizable" style="top: 15px;right:15px; width: 400px">
                <img src="http://placehold.it/400x350/DDDDDD/FFFFFF"  />
            </div>

            <div class="draggable resizable" style="bottom: 0px;right: 15px; width: 400px">
                <img src="http://placehold.it/400x150/DDDDDD/FFFFFF"  />
            </div>
        </div>

    </div>

CSS

body {
        background: white url(screendump.png) top center;
        background-size: cover;
        font-family: sans-serif;
    }

    #sidepanel-container {
        position: absolute;
        right: -900px;
        top: 10%;
    }

    #containment-wrapper {
        width: 900px;
        height: 600px;
        background-color: white;
        border: 1px solid #eee; 
        position: relative;
    }

    .draggable {
        position: absolute;
        width: 200px;
    }

    .resizable, .ui-resizable {
        display: inline-block;
        position: absolute !important;
    }
    .resizable img {
        width: 100%;
        height: auto;
    }

    .toggle {
        transform: rotate(270deg);
        position: absolute;
        left: -221px;
        top: 280px;
        display: block;
        width: 400px;
        border: 1px solid #ec018c;
        border-bottom: 0;
        background-color: #ec018c;
        -webkit-border-top-left-radius: 5px;
        -webkit-border-top-right-radius: 5px;
        -moz-border-radius-topleft: 5px;
        -moz-border-radius-topright: 5px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    .toggle a {
        display: inline-block;
        padding: 10px;
        color: white;
    }

    .shadow.active {
        -webkit-box-shadow: 0px 7px 11px 0px #BBB;
        -moz-box-shadow: 0px 7px 11px 0px #BBB;
        box-shadow: 0px 7px 11px 0px #BBB;
        -webkit-transition: all .2s ease;
        -o-transition: all .2s ease;
        -moz-transition: all .2s ease;
        -ms-transition: all .2s ease;
        -kthtml-transition: all .2s ease;
        transition: all .2s ease;
    }

JavaScript

$(document).ready(function() {    
        var zindex = 0;
        $('.resizable').resizable({
            aspectRatio: true,
            start: function() {
                $(this).css('border', '1px dashed red');
            },
            stop: function() {
                $(this).css('border', '0');
            }
        });
        
        $('.draggable').draggable({
            containment: "#containment-wrapper"
        }).on('mousedown', function() {
            $(this).css('zIndex', ++zindex);
        });

        $('#sidepanel-container').on('click', function(event) {
            // If toggle button was clicked
            if ($(event.target).hasClass('toggle-link')) {
                var el = $(this);
                var animation_millis = 500;
                if (el.hasClass('active')) {
                    el.removeClass('active');
                    $(this).animate({
                        right: "-900",
                        ease: 'swing'
                    }, animation_millis, function() {
                        // callback
                    });
                } else {
                    $(this).animate({
                        right: "0",
                        ease: 'swing'
                    }, animation_millis, function() {
                        el.addClass('active');
                    });
                }
            }
        });
    });