<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Language" content="en" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Image Cropper: jQuery Real-world Demo</title> <script type="text/javascript" src="../../../../jquery/jquery-1.2.6.js"></script> <script type="text/javascript" src="../../../source/ui.core.js"></script> <script type="text/javascript" src="../../../source/ui.resizable.js"></script> <script type="text/javascript" src="../../../source/ui.draggable.js"></script> <script type="text/javascript" src="../../../source/effects.core.js"></script> <script type="text/javascript" src="../../../source/effects.bounce.js"></script> <script type="text/javascript" src="../../../source/effects.scale.js"></script> <style type="text/css"> <!-- /*************************************/ /* Real-World CSS */ @import "../../css/real-world.css"; /*************************************/ /* Demo CSS */ #sidebar div { text-align:center; } .thumb ul { padding:10px 0 0 0; } .thumbs li { margin:4px 20px; } .thumbs li a, .thumbs li a img{ height: 75px; width: 75px; display: block; } .thumbs li a:hover, .thumbs li a:hover img{ height: 130px; width: 130px; } .thumbs li a:hover { border: 4px solid #E8EEF7; } #break strong { margin:0 0 4px 0; } #break ul { padding:6px; } #break ul li { padding:3px 0px; font-style: italic; } #break ul li span { font-style: normal; } .ui-resizable-knob { border: 1px #fff dashed; } /*************************************/ /* Cropper CSS */ #resizeme_containment_wrap_image { position: relative; } #resizeme_containment_div { position: absolute; top:0px; left:0px; width: 150px; height:150px; } #resizeme_containment_div_wrapper { position: relative; } --> </style> <script type="text/javascript"> var getSizeImg = function(src) { var timg = $('<img>').attr('src', src).css({ position: 'absolute', top: '-1000px', left: '-1000px' }).appendTo('body'); var size = [ timg.get(0).offsetWidth, timg.get(0).offsetHeight ]; try { document.body.removeChild(timg[0]); } catch(e) {}; return size; }; $().ready(function(){ $('#resizeme_containment_div').resizable({ containment: $('#resizeme_containment_div_wrapper'), //proxy: 'proxy', //ghost: true, //animate:true, handles: 'all', knobHandles: true, //transparent: true, //aspectRatio: true, autoHide: true, minWidth: 100, minHeight: 100, resize: function(e, ui) { this.style.backgroundPosition = '-' + (ui.instance.position.left) + 'px -' + (ui.instance.position.top) + 'px'; $("#log-top").html(ui.instance.position.top+"px"); $("#log-left").html(ui.instance.position.left+"px"); $("#log-height").html(ui.instance.size.height+"px"); $("#log-width").html(ui.instance.size.width+"px"); }, stop: function(e, ui) { this.style.backgroundPosition = '-' + (ui.instance.position.left) + 'px -' + (ui.instance.position.top) + 'px'; } }) .draggable({ cursor: 'move', containment: $('#resizeme_containment_div_wrapper'), drag: function(e, ui) { this.style.backgroundPosition = '-' + (ui.position.left) + 'px -' + (ui.position.top) + 'px'; $("#log-top").html(ui.instance.position.top+"px"); $("#log-left").html(ui.instance.position.left+"px"); } }); $('.thumbs').find("li a").click(function(e){ $('#resizeme_containment_div').css('top', '0'); $('#resizeme_containment_div').css('left', '0'); var size = getSizeImg($(this).find("img").attr("src")); $('#resizeme_containment_wrap_image').css( { width: size[0], height: size[1], background: 'transparent url('+$(this).find("img").attr("src")+') no-repeat scroll 0%' } ); $('#resizeme_containment_div_wrapper').css( { width: size[0], height: size[1] } ); $('#resizeme_containment_div').css('background', 'transparent url('+$(this).find("img").attr("src")+') no-repeat scroll 0px 0px'); return false; }); $('#resizeme_containment_wrap_image').css({ opacity: 0.5 }); $("#log-height").html($('#resizeme_containment_div').height()+"px"); $("#log-width").html($('#resizeme_containment_div').width()+"px"); }); $(window).load(function(){ var size = getSizeImg("img/img01.jpg"); $('#resizeme_containment_div').css('background', 'transparent url(img/img01.jpg) no-repeat scroll 0px 0px'); $('#resizeme_containment_div_wrapper').css( { width: size[0], height: size[1] } ); $('#resizeme_containment_wrap_image').css( { width: size[0], height: size[1], background: 'transparent url(img/img01.jpg) no-repeat scroll 0%' } ); }); </script> </head> <body> <div id="sidebar"> <ul class="thumbs"> <li><a href="#" title="Open This Image"><img src="img/img01.jpg"/></a></li> <li><a href="#" title="Open This Image"><img src="img/img02.jpg"/></a></li> <li><a href="#" title="Open This Image"><img src="img/img03.jpg"/></a></li> <li><a href="#" title="Open This Image"><img src="img/img04.jpg"/></a></li> <li><a href="#" title="Open This Image"><img src="img/img05.jpg"/></a></li> </div> </div> <div id="main"> <div id="header"> <h2>jQuery Real-world Demo: Image Cropper</h2> </div> <div id="content"> <div id="resizeme_containment_div_wrapper"> <div id="resizeme_containment_wrap_image"></div> <div id="resizeme_containment_div"></div> </div> </div> <div id="break"> <strong>Properties:</strong> <ul> <li>width: <span id="log-width">0px</span></li> <li>height: <span id="log-height">0px</span></li> <li>top: <span id="log-top">0px</span></li> <li>left: <span id="log-left">0px</span></li> </ul> </div> </div> </body> </html>