Customize

by volpeo

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Customize </title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <div id="editor">
        <img id="resizableImage"  src="http://www.volpeo.fr/tests/texture_font/aa-font.php?text=Bonjour&color=E6D69F&bg=728484&size=130">
    </div>
</body>
</html>

CSS

#editor {
    background: url(http://www.lunerouge.org/textures/rock/LRrock0005.jpg);
    width: 500px;
    height: 500px;
    position: absolute;
} 
div.ui-resizable-se {
    background: url(http://volpeo.fr/tests/resize.gif) no-repeat;
    display:none;
}

JavaScript

$(document).ready(function(){
    $("#resizableImage")
        .resizable({
            aspectRatio : true,
            containment: "#editor",
            handles: 'se'
        })
        .parent().draggable({    
            containment: "parent"
        }).hover(
            function() {
                $(this).children('div.ui-resizable-handle').css('display','block');
                $(this).mousedown(function(){
                    $(this).css('cursor','move');
                });
                $(this).mouseup(function(){
                    $(this).css('cursor','pointer');
                });
                $(this).css({
                    'border':'1px dashed white',
                    'margin-top':'-1px',
                    'margin-left':'-1px',
                    'cursor':'pointer',
                    'background':'rgba(255,255,255,0.1)'
                });
            },
            function() {
                $(this).children('div.ui-resizable-handle').css('display','none');
                $(this).css({
                    'border':'none',
                    'margin-top':'0px',
                    'margin-left':'0px',
                    'cursor':'normal',
                    'background':'rgba(255,255,255,0)'
                });
            }
    );  
    $('div.ui-resizable-handle').css('display','none');
});