|
 |
| |
ถามเกี่ยวกับ การดึงค่า jQuery มาใช้งาน ผมซื้อ Code มา ZoomSmooth |
| |
 |
|
|
 |
 |
|
|
 |
 |
 |
 |
| Date :
2014-01-12 22:15:20 |
By :
mr.win |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
ใช่แบบนี้เปล่าครับ (หาก Copy Code อันด้านล่างนี้ไป ต้องไปเปลี่ยน path ของ jquery.smoothZoom.min.js กับ jquery-1.8.2.min.js ก่อนนะครับ
Code (PHP)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.smooth_zoom_preloader {
background-image: url(zoom_assets/preloader.gif);
}
.smooth_zoom_icons {
background-image: url(zoom_assets/icons.png);
}
body {
font-family:Verdana, Geneva, sans-serif
color:#666;
font-size:12px;
}
span {
color:#78C0FC;
font-family:"Courier New", Courier, monospace;
}
a:link {
color:#06C;
font-weight:bold;
text-decoration:none;
}
a:visited {
color:#06C;
}
a:active {
color:#06C;
text-decoration:none;
}
a:hover {
color:#039;
text-decoration:underline;
}
</style>
<script src="js_function/jquery-1.8.2.min.js"></script>
<script src="js_function/jquery.smoothZoom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
setInterval(function() {
show_zoom_ratio();
}, 1000);
$("#click_alert_zoom").click(function() {
var zoomDataObject = $('#yourImageID').smoothZoom('getZoomData');
alert(zoomDataObject.ratio);
});
});
jQuery(function($){
$('#yourImageID').smoothZoom({
width: 400,
height: 300,
zoom_BUTTONS_SHOW : 'NO',
pan_BUTTONS_SHOW : 'NO',
pan_LIMIT_BOUNDARY : 'NO'
});
//alert("Helow"+$('#yourImageID').smoothZoom(width));
});
function writeObject(){
var zoomDataObject = $('#yourImageID').smoothZoom('getZoomData');
$('#code').html(
"Normal X: <span style='color:#000000'>"+parseInt(zoomDataObject.normX) +"</span>"
+"<br />Normal Y: <span style='color:#000000'>"+parseInt(zoomDataObject.normY) +"</span>"
+"<br />Normal Width: <span style='color:#000000'>"+parseInt(zoomDataObject.normWidth) +"</span>"
+"<br />Normal Height: <span style='color:#000000'>"+parseInt(zoomDataObject.normHeight) +"</span>"
+"<br /><br />Scaled X: <span style='color:#000000'>"+parseInt(zoomDataObject.scaledX) +"</span>"
+"<br />Scaled Y: <span style='color:#000000'>"+parseInt(zoomDataObject.scaledY) +"</span>"
+"<br />Scaled Width: <span style='color:#000000'>"+parseInt(zoomDataObject.scaledWidth) +"</span>"
+"<br />Scaled Height: <span style='color:#000000'>"+parseInt(zoomDataObject.scaledHeight) +"</span>"
+"<br /><br />Center X: <span style='color:#000000'>"+parseInt(zoomDataObject.centerX) +"</span>"
+"<br />Center Y: <span style='color:#000000'>"+parseInt(zoomDataObject.centerY) +"</span>"
+"<br /><br />Scale Ratio:<br /> <span style='color:#000000'>"+zoomDataObject.ratio +"</span>"
);
}
function show_zoom_ratio() {
var zoomDataObject = $('#yourImageID').smoothZoom('getZoomData');
$("#msg").html(zoomDataObject.ratio);
}
</script>
</head>
<body>
<div style="float:left; margin-right:20px">
<img id="yourImageID" src="images/your_image_locations.jpg"/>
<input type="button" name="button" id="click_alert_zoom" value="คลิกเพื่อ alert zoom ratio" />
<br />
ratio : <span id="msg"></span>
</div>
<div style="float:left; width:110px; height:354px; background-color:#F2F2F2; padding:15px">
<a href="#" onmousedown="$('#yourImageID').smoothZoom('focusTo', {x:357, y:248, zoom:150, speed:2})" onClick="return false">FocusTo</a><br /> <span>(Location 1)</span><br /><br />
<a href="#" onmousedown="$('#yourImageID').smoothZoom('focusTo', {x:492, y:482, zoom:200})" onClick="return false">FocusTo</a><br /> <span>(Location 2)</span><br /><br />
<a href="#" onmousedown="$('#yourImageID').smoothZoom('focusTo', {x:676, y:196, zoom:100})" onClick="return false">FocusTo</a><br /> <span>(Location 3)</span><br /><br /><br />
<a href="#" onmousedown="$('#yourImageID').smoothZoom('zoomIn')" onClick="return false">Zoom In</a><br /><br />
<a href="#" onmousedown="$('#yourImageID').smoothZoom('zoomOut')" onClick="return false">Zoom Out</a><br /><br />
<a href="#" onmousedown="$('#yourImageID').smoothZoom('moveLeft')" onClick="return false">Move Left</a><br /><br />
<a href="#" onmousedown="$('#yourImageID').smoothZoom('moveRight')" onClick="return false">Move Right</a><br /><br />
<a href="#" onmousedown="$('#yourImageID').smoothZoom('moveUp')" onClick="return false">Move Up</a><br /><br />
<a href="#" onmousedown="$('#yourImageID').smoothZoom('moveDown')" onClick="return false">Move Down</a><br /><br />
<a href="#" onmousedown="$('#yourImageID').smoothZoom('Reset')" onClick="return false">Reset</a><br /><br />
</div>
<div style="float:left; width:180px; background-color:#F2F2F2; margin-left:20px; padding:15px">
<a href="#" onmousedown="writeObject()" onClick="return false">Get Zoom Data:</a><br /><br />
<span id="code" style="color:#888"></span>
</div>
</body>
</html>
|
| |
|
|
| |
| Date :
2014-01-14 15:46:33 |
By :
pantatonic |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
น่าเสียดายอุตส่าซื้อมา เวอร์ชั่นนี้มีฝรั่งทำแจกฟรีเพียบ
|
| |
|
|
| |
| Date :
2014-01-14 16:16:35 |
By :
date |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 01
|
