ใครมี code PHP Mysql ที่คลิกบนภาพแล้วแสดงภาพขนาดใหญ่ แบบขนาดจริงค่ะ
การทำให้ภาพขยายเมื่อชี้เมาส์ เป็น client side ต้องใช้ js, css, html event
php mysql เป็น server side
mysql เอาไว้เก็บและแสดงข้อมูลที่เก็บออกมา
php เอาไว้สั่งทำงานต่างๆบน server
php mysql ไม่ได้เกี่ยวอะไรกับการขยายรูปเมื่อชี้เมาส์เลย ไม่เกี่ยวเลยสักนิด
ลองศึกษา on event ต่างๆก่อนดีกว่ามั้ง ขนาด php mysql ไม่เกี่ยวยังไปเอามาเกี่ยวได้ไงเนี่ย
https://www.w3schools.com/TAgs/ref_eventattributes.asp
https://www.w3schools.com/jsref/obj_touchevent.asp
ประวัติการแก้ไข 2020-10-02 21:41:37 2020-10-03 05:34:19
Date :
2020-10-02 19:41:44
By :
mr.v
ขอบคุณ mr.v มากค่ะ กำลังศึกษา link ทีให้มาอย่างละเอียด แต่การคลิกภาพแล้วแสดงหน้าใหม่เป็นภาพใหญ่ (ต้นฉบับ) จาก Mysql ฟิวส์ ที่ชื่อว่า sys_pic1 ซึ่งเก็บชื่อไฟล์ภาพ JPEG ไว้ค่ะ ต้องทำอย่างไรค่ะ
ประวัติการแก้ไข 2020-10-03 09:32:18
Date :
2020-10-03 09:28:01
By :
Pimpada
ใช้ <a href="">..</a> ไม่ได้เหรอ
Date :
2020-10-03 11:00:52
By :
mr.v
ใช้ <a href="">..</a> ได้ค่ะ แต่ชื่อไฟล์ภาพ แสดงขึ้นมาด้วย (แสดงข้างหน้ารูปภาพ คลิกได้ด้วย) ต้องการให้ภาพแสดงอย่างเดียว แล้วสามารถคลิกบนรูปภาพได้เลยค่ะ
Code (PHP)
echo "<td><a href='view_system2.php?sys_id=" .$row['sys_id']. "'>".$row["sys_pic1"]."</a><img src=\"../sysimg/".$row["sys_pic1"]."\" width='130' /></td>";
Date :
2020-10-03 13:23:10
By :
Pimpada
ใช้ ontouchstart กับ ontouchend แล้วค่ะ แต่ภาพที่แสดงไม่เต็มจอมือถือ ถ้าเปลี่ยนเป็นวิธีที่ 2 คือคลิก link แล้วเกิดหน้าใหม่ ได้ไหมค่ะ
Code (PHP)
echo "<td><a href='view_system2.php?sys_id=" .$row['sys_id']. "'>".$row["sys_pic1"]."</a><img src=\"../sysimg/".$row["sys_pic1"]."\" width='130' /></td>";
Date :
2020-10-03 14:58:49
By :
Pimpada
การแสดงภาพ อะไรสักอย่างควร คำนวณขนาดภาพก่อน หา กว้าง/ยาว ของภาพ
แล้วไปคำนวณ กว้าง/ยาว ของหน้าจอ จะจัดขนาดอะไรเท่าไหร่ ก็ว่าไป
Date :
2020-10-03 17:43:57
By :
Chaidhanan
คุณจขกท.เอามาแค่โค้ดตรงแสดงรูปภาพ ไม่เอาส่วน function ที่เรียกใช้มา ไม่มี css มา แล้วบอกว่าชี้เมาส์ทำงานได้. ซึ่งคงไม่มีใครเดาออกว่าทำงานได้ แบบไหน? เดาว่าคงมีตำแหน่งรูปเล็ก เอาเมาส์ชี้แล้วมีรูปใหญ่เหนือรูปเล็ก.
ทีนี้พอจะให้ทำงานในมือถือ บอกว่ามันไม่เต็มจอ แล้ว event เหล่านั้นมันรองรับการเริ่มแตะจอ และการสิ้นสุดแตะจอ คือเอานิ้วออก ดังนั้นถ้าจะให้ภาพมันเต็มจอ มันก็จะมีปัญหากับการใช้งาน (UX) อีก คือแตะแล้วภาพใหญ่มาบังรูปย่อ แล้ว event แตะภาพก็หยุดทำงาน แล้วภาพก็จะกลับไปเล็ก ทั้งที่นิ้วยังแตะอยู่ ก็จะกลับมาใหญ่อีก แล้วก็กลับไปเล็กเองอีก มันก็เป็นไปได้ที่จะลงเอยมีปัญหาแบบนี้. ดังนั้นการใช้งานแบบนี้ ใช้ของสำเร็จรูปที่เขาทำมาจะดีที่สุด คือมันจะรองรับทั้งคอมพิวเตอร์และมือถือเลย รองรับเมาส์และมือแตะจอ แตะทีขยาย แตะอีกทีปิด ไม่ต้องมาแก้ปัญหา event เองให้วุ่น และถ้าหาที่มันรองรับ responsive ได้ก็ไม่ต้องมาตามแก้ css responsive อีก เรียกว่าเอามาใช้ปัญหาจบหมด.
Date :
2020-10-03 22:33:03
By :
mr.v
code แบบนี้ค่ะ มีชื่อไฟล์ .jpg อยู่ด้านหน้าภาพ (คลิกแล้วเกิดหน้าใหม่) ต้องการให้คลิกที่ภาพได้เลยค่ะ ไม่ต้องการคลิกที่ไฟล์ภาพค่ะ
Code (PHP)
<?php session_cache_limiter('private, must-revalidate');
session_cache_expire(60);?>
<?php @session_start(); ?>
<?php include('header.php'); ?>
<?php include('contum.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Data Tables</title>
<!-- นำเข้า CSS จาก Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- นำเข้า CSS จาก dataTables -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.css">
<!-- นำเข้า Javascript จาก Jquery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- นำเข้า Javascript จาก dataTables -->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script type="text/javascript">
//คำสั่ง Jquery เริ่มทำงาน เมื่อ โหลดหน้า Page เสร็จ
$(function(){
//กำหนดให้ Plug-in dataTable ทำงาน ใน ตาราง Html ที่มี id เท่ากับ example
$('#example').dataTable( {
"bFilter": false
} );
});
</script>
</head>
<body>
<!-- เนื้อหา -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<br/>
<center>
<form method="post">
<input type="text" name="txt_search" size="50" Value="<?=(isset($_POST['txt_search'])? $_POST['txt_search'] : '')?>" />
<input type="submit" name="search" value="ค้นหา" />
</form>
</center>
<p align="right">
<a href="insert_system.php"><button name="insert" >เพิ่มข้อมูล</button></a>
</p>
<section class="content-header">
<h1>
แสดงข้อมูลระบบ
</h1>
</section>
<!-- Main content -->
<section class="content">
<div class="CSSTableGenerator" >
<script>
function bigImg(x) {
x.style.height = "1754px";
x.style.width = "1240px";
}
function normalImg(x) {
x.style.height = "212px";
x.style.width = "150px";
}
</script>
<table id="example">
<thead>
<tr>
<td>ลำดับ</td>
<td>รหัสสินค้า</td>
<td>ชื่อสินค้า</td>
<td>รูป</td>
<td>รูป2</td>
</tr>
</thead>
<tbody>
<?php
$sql=" select * from tb_system ";
if(isset($_POST['search']))
{
$txt_search=$_POST['txt_search'];
$sql.=" where";
$sql.=" sys_no like '%".$txt_search."%'";
$sql.=" or";
$sql.=" sys_name like '%".$txt_search."%'";
$sql.=" or";
$sql.=" sys_detail like '%".$txt_search."%'";
}
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<tr>";
echo "<td>" . $row["sys_id"]. "</td>";
echo "<td> <a href='view_system.php?sys_id=" .$row['sys_id']. "'>".$row["sys_no"]."</a></td>";
echo "<td>" . $row["sys_name"]. "</td>";
//echo "<td><img src=\"../sysimg/".$row["sys_pic1"]."\" width='300'/></td>";
echo "<td><a href='view_system1.php?sys_id=" .$row['sys_id']. "'>".$row["sys_pic1"]."</a><img src=\"../sysimg/".$row["sys_pic1"]."\" width='130' /></td>";
echo "<td><a href='view_system2.php?sys_id=" .$row['sys_id']. "'>".$row["sys_pic2"]."</a><img src=\"../sysimg/".$row["sys_pic2"]."\" width='130' /></td>";
}
}
?>
</tbody>
</table>
</body>
</html>
<?php //include('footer.php'); ?>
Date :
2020-10-09 15:47:40
By :
Pimpada
a href ครอบที่ใดที่นั่น ก็จะคลิกได้...ดังนั้น ครอบ <img> ด้วยครับ มันถึงจะคลิกได้
Date :
2020-10-09 16:05:48
By :
PhrayaDev
สำเร็จแล้วค่ะ ขอบคุณทุกท่านนะคะ a href ครอบตามคำแนะนำของคุณพระยาเทพ สุดยอดค่ะ
Code (PHP)
echo "<td><a href='view_system1.php?sys_id=" .$row['sys_id']. "'><img src=\"../sysimg/".$row["sys_pic1"]."\" width='130' /></td>";
Date :
2020-10-09 17:43:00
By :
Pim
แสดงว่าแม้แต่ html ก็งงสินะ ผมก็บอกตั้งแต่คห.3 ว่าเอา a ครอบ ถ้าเข้าใจทำไปก็เสร็จนานแล้วปะ?
Date :
2020-10-09 17:52:19
By :
mr.v
ใช่ค่ะ mr.v "ใช้ <a href="">..</a> ไม่ได้เหรอ" ตั้งแต่ตอนแรก ยอมรับว่าเบลอค่ะ มีหลาย project จนตอนนี้ เส้นเลือดโปง 2 ขมับเลยค่ะ
Date :
2020-10-09 18:00:46
By :
Pim
Load balance : Server 02