<div>
<button id="scale_up" >이미지 확대</button>
<select id="selectBox">
<option value="50" onclick="scaleOpt('50');" >50%</option>
<option value="100" onclick="scaleOpt('50');" >100%</option>
<option value="150" onclick="scaleOpt('50');" >150%</option>
...
...
...
</select>
<button id="rotateR" >이미지 축소</button>
<img id="bigImg" src="" style="width: 644px; height: 912px;">
</div>
<script type="text/javascript">
// selectBox로 스케일 조정
// 이미지의 크기가 너무 클 경우 팝업창에 한번에 보이지 않을 수 있으니 처음 가져온 이미지의 크기를 저장합니다.
var width = 644;
var height = 912;
function scaleOpt(scale){
$("#bigImg").css("width", width*scale);
$("#bigImg").css("height", height*scale);
}
//이미지 확대
var selectBoxVal;
$('#scale_up').click(function() {
selectBoxVal = parseInt($("#selectBox").val());
if(selectBoxVal < 300){
$("#selectBox").val(selectBoxVal+10).prop("selected", true);
$("#bigImg").css("width", width*($("#selectBox").val()/100));
$("#bigImg").css("height", height*($("#selectBox").val()/100));
}
else if(selectBoxVal == 300){
alert("최대 확대 배율입니다.");
}
});
// 이미지 축소
$('#scale_down').click(function() {
selectBoxVal = parseInt($("#selectBox").val());
if(selectBoxVal > 50){
$("#selectBox").val(selectBoxVal-10).prop("selected", true);
$("#bigImg").css("width", width*($("#selectBox").val()/100));
$("#bigImg").css("height", height*($("#selectBox").val()/100));
}
else if(selectBoxVal == 50){
alert("최대 축소 배율입니다.");
}
});
</script>
