jquery-ui/ui/demos/real-world/image-cropper/index.html
Paul Bakaus 67f393fd7c
2008-05-23 12:24:41 +00:00

230 lines
6.3 KiB
HTML

<!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.5.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>