aboutsummaryrefslogtreecommitdiffstats
path: root/demos/real-world/image-cropper
diff options
context:
space:
mode:
Diffstat (limited to 'demos/real-world/image-cropper')
-rw-r--r--demos/real-world/image-cropper/img/img01.jpgbin0 -> 84258 bytes
-rw-r--r--demos/real-world/image-cropper/img/img02.jpgbin0 -> 112791 bytes
-rw-r--r--demos/real-world/image-cropper/img/img03.jpgbin0 -> 59031 bytes
-rw-r--r--demos/real-world/image-cropper/img/img04.jpgbin0 -> 54449 bytes
-rw-r--r--demos/real-world/image-cropper/img/img05.jpgbin0 -> 92368 bytes
-rw-r--r--demos/real-world/image-cropper/index.html231
-rw-r--r--demos/real-world/image-cropper/real-world.css104
7 files changed, 335 insertions, 0 deletions
diff --git a/demos/real-world/image-cropper/img/img01.jpg b/demos/real-world/image-cropper/img/img01.jpg
new file mode 100644
index 000000000..4d5f88445
--- /dev/null
+++ b/demos/real-world/image-cropper/img/img01.jpg
Binary files differ
diff --git a/demos/real-world/image-cropper/img/img02.jpg b/demos/real-world/image-cropper/img/img02.jpg
new file mode 100644
index 000000000..5745265f0
--- /dev/null
+++ b/demos/real-world/image-cropper/img/img02.jpg
Binary files differ
diff --git a/demos/real-world/image-cropper/img/img03.jpg b/demos/real-world/image-cropper/img/img03.jpg
new file mode 100644
index 000000000..7e6928f63
--- /dev/null
+++ b/demos/real-world/image-cropper/img/img03.jpg
Binary files differ
diff --git a/demos/real-world/image-cropper/img/img04.jpg b/demos/real-world/image-cropper/img/img04.jpg
new file mode 100644
index 000000000..8216a2382
--- /dev/null
+++ b/demos/real-world/image-cropper/img/img04.jpg
Binary files differ
diff --git a/demos/real-world/image-cropper/img/img05.jpg b/demos/real-world/image-cropper/img/img05.jpg
new file mode 100644
index 000000000..35de5bd8c
--- /dev/null
+++ b/demos/real-world/image-cropper/img/img05.jpg
Binary files differ
diff --git a/demos/real-world/image-cropper/index.html b/demos/real-world/image-cropper/index.html
new file mode 100644
index 000000000..afa85ae3c
--- /dev/null
+++ b/demos/real-world/image-cropper/index.html
@@ -0,0 +1,231 @@
+<!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 "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) {
+ 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(e, ui) {
+ var self = $(this).data("resizable");
+ this.style.backgroundPosition = '-' + (self.position.left) + 'px -' + (self.position.top) + 'px';
+ }
+ })
+
+ .draggable({
+
+ cursor: 'move',
+
+ containment: $('#resizeme_containment_div_wrapper'),
+
+ drag: function(e, ui) {
+ var self = $(this).data("draggable");
+ 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");
+
+ }
+
+ });
+
+ $('.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>
diff --git a/demos/real-world/image-cropper/real-world.css b/demos/real-world/image-cropper/real-world.css
new file mode 100644
index 000000000..683033351
--- /dev/null
+++ b/demos/real-world/image-cropper/real-world.css
@@ -0,0 +1,104 @@
+/*************************************/
+/* Blueprint: reset.css */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ outline: 0;
+ font-size: 100%;
+ font-family: inherit;
+ vertical-align: baseline;
+}
+
+/* Remember to define focus styles! */
+:focus {
+ outline: 0;
+}
+body {
+ line-height: 1;
+ color: black;
+ background: white;
+}
+ol, ul {
+ list-style: none;
+}
+
+/* Tables still need 'cellspacing="0"' in the markup. */
+table {
+ border-collapse: separate;
+ border-spacing: 0;
+}
+caption, th, td {
+ text-align: left;
+ font-weight: normal;
+}
+
+/* Remove possible quote marks (") from <q>, <blockquote>. */
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: "";
+}
+blockquote, q {
+ quotes: "" "";
+}
+
+.clear {
+ clear:both;
+}
+
+/*************************************/
+/* Layout */
+body, html {
+ height: 100%;
+ font-family:sans-serif;
+ font-size:13px;
+ margin:0px;
+ padding:0px;
+}
+body, html {
+ height: 100%;
+ font-family:sans-serif;
+ font-size:13px;
+
+}
+#main {
+ height:auto;
+ background: #E8EEF7;
+ border-left:1px solid #ccc;
+ border-bottom:1px solid #ccc;
+ margin:0 0 0 200px;
+}
+ #header {
+ height:30px;
+ padding:10px;
+ font-size:2em;
+ font-weight:bold;
+ text-align: center;
+ border-bottom:1px solid #ccc;
+ background: #E8EEF7;
+ }
+ #main #content {
+ padding:10px;
+ background: #FFF;
+ }
+ #main #break {
+ padding:10px;
+ border-top:1px solid #ccc;
+ }
+#sidebar {
+ float:left;
+ width:200px;
+ height:100%;
+ border-right:1px solid #ccc;
+}
+ #sidebar div {
+ padding:10px;
+ }
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-08 09:59:54 +0000