diff options
Diffstat (limited to 'demos/real-world/image-cropper/index.html')
| -rw-r--r-- | demos/real-world/image-cropper/index.html | 228 |
1 files changed, 0 insertions, 228 deletions
diff --git a/demos/real-world/image-cropper/index.html b/demos/real-world/image-cropper/index.html deleted file mode 100644 index 5c6f2c9de..000000000 --- a/demos/real-world/image-cropper/index.html +++ /dev/null @@ -1,228 +0,0 @@ -<!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-1.2.6.js"></script> - <script type="text/javascript" src="../../../ui/ui.core.js"></script> - <script type="text/javascript" src="../../../ui/ui.resizable.js"></script> - <script type="text/javascript" src="../../../ui/ui.draggable.js"></script> - - <script type="text/javascript" src="../../../ui/effects.core.js"></script> - <script type="text/javascript" src="../../../ui/effects.bounce.js"></script> - <script type="text/javascript" src="../../../ui/effects.scale.js"></script> - - -<style type="text/css"> -<!-- -/*************************************/ -/* Real-World CSS */ - -@import "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(event, ui) { - var self = $(this).data("resizable"); - - this.style.backgroundPosition = '-' + (self.position.left) + 'px -' + (self.position.top) + 'px'; - - - $("#log-top").html(self.position.top+"px"); - $("#log-left").html(self.position.left+"px"); - - $("#log-height").html(self.size.height+"px"); - $("#log-width").html(self.size.width+"px"); - - }, - stop: function(event, ui) { - var self = $(this).data("resizable"); - this.style.backgroundPosition = (self.position.left * -1) + 'px ' + (self.position.top * -1) + 'px'; - } - }) - - .draggable({ - - cursor: 'move', - - containment: $('#resizeme_containment_div_wrapper'), - - drag: function(event, ui) { - var self = $(this).data("draggable"); - this.style.backgroundPosition = (self.position.left * -1) + 'px ' + (self.position.top * -1) + 'px'; - - $("#log-top").html(self.position.top+"px"); - $("#log-left").html(self.position.left+"px"); - } - - }); - - $('.thumbs').find("li a").click(function(event){ - - $('#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> |