|
 |
| |
ขอความช่วยเหลือเรื่อง Code นี้หน่อยค่ะ ในการแสดงภาพจากตารางคลิกภาพเล็กในช่อง |
| |
 |
|
|
 |
 |
|
JS + bootstrap
ผิดตรงไหนต้องขออภัยด้วยน่ะครับ
ดาวน์โหลด : https://drive.google.com/file/d/0BzBdI6OVibQUbFJTYnMwY0FwOXM/view?usp=sharing
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" />
<link href="css/bootstrap.css" rel="stylesheet">
<title>View Image</title>
<style>
img:hover{
cursor:pointer;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script>
$(document).ready(function() {
//เปลี่ยนรูปภาพหลังจากที่คลิกรูป
$('[data-load="preview"]').on('click', function(){
var URL = $(this).attr("src");
$('#preview').attr("src" , URL);
});
//โหลดเว็บเสร็จ เปลี่ยนรูปภาพ
var SetURL = $('[data-load="preview"]').attr("src");
$("#preview").attr("src" , SetURL);
//ดูรูปแบบเต็มโดยใช้ Modal bootstrap
$('[data-load="preview_full"]').on('click', function(){
var Target = $(this).attr("src");
$('#preview_full').attr("src" , Target);
$("#ViewImage").modal(
{
show:true,
backdrop:'static'
}
)
});
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
});
</script>
</head>
<body>
<!--Modal-->
<div class="modal fade" id="ViewImage" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" style="width:90%;height:90%;z-index:9999;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Full Image</h4>
</div>
<div class="modal-body">
<img id="preview_full" src="" style="width:100%;height:auto;"/>
</div>
</div>
</div>
</div>
<div align="center" style="padding:10px;">
<?php
$connect = mysql_connect("localhost","root","1234") or die("Error Connect to Database");
$num = $_GET["num"];
$database = mysql_select_db("thaicreate");
$str = "SELECT * FROM Photo WHERE Num = $num";
$query = mysql_query($str);
if(mysql_num_rows($query) == 0){
echo '<div class="alert alert-danger" role="alert" style="width:800px;">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
ไม่พบข้อมูล
</div>';
exit;
}
?>
<div class="panel panel-default" style="width:800px;">
<div class="panel-heading">แสดงรูปภาพ</div>
<div class="panel-body">
<img data-load="preview_full" id="preview" class="thumbnail" src="" style="width:100%;height:auto;" data-toggle="tooltip" data-placement="right" title="คลิกเพื่อดูรูปภาพเต็ม"/>
</div>
<div class="panel-footer" style="background:#fff;">
<?php
while($result = mysql_fetch_array($query))
{
$num = $result["Num"];
$image = $result["URL"];
?>
<img data-load="preview" class="thumbnail" src="<?php echo $image ?>" style="width:171px;height:auto;" />
<?php
}
?>
</div>
</div>
</div>
</body>
</html>
|
 |
 |
 |
 |
| Date :
2015-06-08 04:16:30 |
By :
1241050 |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
|
|
| |
|
 Load balance : Server 05
|
