mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
230 lines
6.3 KiB
HTML
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>
|