<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>
<!--<script type="text/javascript" src="jquery.ui.core.js"></script>-->
<script type="text/javascript" src="jquery.ui.resizable.js"></script>
<link rel="stylesheet" href="css/ui-smoothness/jquery.ui.all.css">
<script type="text/javascript">
$(function(){
$("input:eq(0)").click(function(){
$("img").resizable({
//最小の幅（デフォルトは10）
minWidth:$("img").width()/2,
//最小の高さ（デフォルトは10）
minHeight:$("img").height()/2,
//最大の幅
maxWidth:$("img").width()*2,
//最大の高さ
maxHeight:$("img").height()*2,
//サイズ変更中に領域のサイズを表示
proxy:true,
//マウスカーソルが領域から離れたら枠を非表示（デフォルトはfalse）
autoHide:true,
//z-indexの値
zIndex:"",
//拡大／縮小のためにドラッグする要素
handles:"",
containment:"",
//縦横比（アスペクト比）を維持する（デフォルトはfalse）
aspectRatio:true,
//ドラッグ用の枠を追加せずに拡大／縮小（デフォルトはfalse）
transparent:true,
//同時に拡大／縮小を行う要素（配列で複数指定可能）
proportionallyResize:"",
//拡大／縮小の開始直後に実行する内容（コールバック関数）
start:function(){
console.log("start");
},
//拡大／縮小の終了直後に実行する内容（コールバック関数）
stop:function(){
console.log("stop");
},
//拡大／縮小のドラッグ中に実行する内容（コールバック関数）
resize:function(){
console.log("resize");
},
//ドラッグ可能な位置を四角で表示（デフォルトはfalse）
knobHandles:true,
//サイズ変更時の増分（[左右方向のピクセル数,上下方向のピクセル数]）
grid:[2,2],
//サイズ変更中の領域の大きさを示す（trueもしくはCSSクラス名で記述）
ghost:true,
//サイズ変更後の大きさに変更するときにアニメーションによる動きをつける
animate:true,
//ドラッグ開始時のカーソルの設定をドラッグ中も維持する（デフォルトはtrue）
preserveCursor:false
});
});
$("input:eq(1)").click(function(){
$("img").resizable("destroy");
});
$("input:eq(2)").click(function(){
$("img").resizable("enable");
});
$("input:eq(3)").click(function(){
$("img").resizable("disable");
});
});
</script>
<style type="text/css">
#ex1{
width:200px;
height:200px;
background-color:#CCCCCC;
}
/*拡大／縮小が可能な要素*/
.ui-resizable{
}
/*拡大／縮小が可能な領域を示す枠*/
.ui-wrapper{
}
/*拡大／縮小は無効*/
.ui-resizable-disabled{
}
/*マウスカーソルが領域の範囲に重なると枠を表示*/
.ui-resizable-autohide{
}
/*拡大／縮小が可能な枠*/
.ui-resizable-handle{
}
/*枠（上辺）*/
.ui-resizable-n{
}
/*枠（右辺）*/
.ui-resizable-n{
}
/*枠（下辺）*/
.ui-resizable-n{
}
/*枠（左辺）*/
.ui-resizable-n{
}
/*枠の角（右上）*/
.ui-resizable-n{
}
/*枠の角（左上）*/
.ui-resizable-n{
}
/*枠の角（右下）*/
.ui-resizable-n{
}
/*枠の角（左下）*/
.ui-resizable-n{
}
/*サイズ変更中に領域の大きさを示す要素（gohsutオプションが記述された時）*/
.ui-resizable-ghost{
}
/*ドラッグ可能な位置を示す要素*/
.ui-resizable-knob-handle{
}
/*ドラッグ表示中の枠*/
proxy{
border:5px dashed #000000;
}
</style>
</head>
<body>
<img src="img/image1.png">
<input type="button" value="表示領域の設定（拡大／縮小を可能に）">
<input type="button" value="resizableを解除する">
<input type="button" value="resizableを有効にする">
<input type="button" value="resizableを無効にする">
</body>
</html>