<!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>
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง
