r2448 - Image Cropper Demo: Improvements, making the demo more usable - partial fix for #4334. T...
Author: scott.gonzalez
Date: Sun Apr 12 14:46:45 2009
New Revision: 2448
Added:
branches/1.6/demos/real-world/image-cropper/image-cropper.css
branches/1.6/demos/real-world/image-cropper/image-cropper.js
Modified:
branches/1.6/demos/real-world/image-cropper/index.html
Log:
Image Cropper Demo: Improvements, making the demo more usable - partial fix
for #4334. Thanks to Andrew Powell for the patch.
Added: branches/1.6/demos/real-world/image-cropper/image-cropper.css
==============================================================================
--- (empty file)
+++ branches/1.6/demos/real-world/image-cropper/image-cropper.css Sun Apr
12 14:46:45 2009
@@ -0,0 +1,68 @@
+
+/*************************************/
+/* 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 */
+
+#_Container_Image, #\\_Container\\_Image {
+ position: relative;
+}
+#_Container, #\\_Container {
+ position: absolute;
+ top:0px;
+ left:0px;
+ width: 150px;
+ height:150px;
+}
+
+#_Wrapper, #\\_Wrapper {
+ position: relative;
+}
Added: branches/1.6/demos/real-world/image-cropper/image-cropper.js
==============================================================================
--- (empty file)
+++ branches/1.6/demos/real-world/image-cropper/image-cropper.js Sun Apr 12
14:46:45 2009
@@ -0,0 +1,90 @@
+ var getSizeImg = function(src) {
+ var timg = $('<img>').attr('src', src).css({ position: 'absolute',
top: '-1000px', left: '-1000px' }).appendTo('body');
+ var size = {width: timg.get(0).offsetWidth, height:
timg.get(0).offsetHeight };
+
+ try { document.body.removeChild(timg[0]); }
+ catch(e) {};
+
+ return size;
+ };
+
+$().ready(function(){
+
+ $('#_Container').resizable({
+ containment: $('#_Wrapper'),
+ handles: 'all',
+ knobHandles: true,
+ autoHide: true,
+ minWidth: 100,
+ minHeight: 100,
+ resize: function(event, ui){
+ var self = $(this).data("resizable"),
+ imageSize = $('#_Container').data("image-size"),
+ top = self.position.top,
+ height = ((self.position.top + self.size.height) <= imageSize.height ?
self.size.height : imageSize.height),
+ left = self.position.left,
+ width = ((self.position.left + self.size.width) <= imageSize.width ?
self.size.width : imageSize.width);
+
+ left = left > 0 ? left : 0;
+ top = top > 0 ? top : 0;
+
+ var bgPos = '-' + (left + 1) + 'px -' + (top + 1) + 'px';
+
+ //the borders of the resize rect are offsetting the bg pos incorrectly.
subtract (add, since its a negative) 1 to fix.
+ $(this).css({backgroundPosition: bgPos});
+
+ $("#log-top").html(top + "px");
+ $("#log-height").html(height + "px");
+ $("#log-left").html(left + "px");
+ $("#log-width").html(width + "px");
+ },
+ stop: function(event, ui){
+ var self = $(this).data("resizable"),
+ top = self.position.top,
+ left = self.position.left;
+
+ left = left > 0 ? left : 0;
+ top = top > 0 ? top : 0;
+
+ $(this).css({backgroundPosition: ((left + 1) * -1) + 'px ' + ((top +
1) * -1) + 'px'});
+ }
+ })
+ .draggable({
+ cursor: 'move',
+ containment: $('#_Wrapper'),
+ drag: function(event, ui){
+ var self = $(this).data("draggable");
+ $(this).css({backgroundPosition: ((self.position.left + 1) * -1)
+ 'px ' + ((self.position.top + 1) * -1) + 'px'});
+
+ $("#log-top").html(self.position.top+"px");
+ $("#log-left").html(self.position.left+"px");
+ }
+ });
+
+ $('.thumbs')
+ .find("li a")
+ .click(function(event){
+ $('#_Container').css({top: '0', left: '0'});
+
+ var size = getSizeImg($(this).find("img").attr("src"));
+
+ $('#_Container_Image').css({
+ width: size.width,
+ height: size.height,
+ background: 'transparent url('+$(this).find("img").attr("src")+')
no-repeat scroll 0%'
+ });
+
+ $('#_Wrapper').css({ width: size.width, height: size.height });
+ $('#_Container')
+ .css('background', 'transparent
url('+$(this).find("img").attr("src")+') no-repeat scroll 0px 0px')
+ .data("image-size", size);
+
+ return false;
+ });
+
+ $('#_Container_Image').css({ opacity: 0.5 });
+ $("#log-height").html($('#_Container').height()+"px");
+ $("#log-width").html($('#_Container').width()+"px");
+
+ $(".thumbs li a:first").click();
+});
Modified: branches/1.6/demos/real-world/image-cropper/index.html
==============================================================================
--- branches/1.6/demos/real-world/image-cropper/index.html (original)
+++ branches/1.6/demos/real-world/image-cropper/index.html Sun Apr 12
14:46:45 2009
@@ -14,185 +14,9 @@
<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>
+ <link href="image-cropper.css" type="text/css" rel="stylesheet" />
+
+ <script type="text/javascript" src="image-cropper.js"></script>
</head>
<body>
<div id="sidebar">
@@ -209,9 +33,9 @@
<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 id="_Wrapper">
+ <div id="_Container_Image"></div>
+ <div id="_Container"></div>
</div>
</div>
<div id="break">