Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,037

HOME > PHP > PHP Forum > ใครมี code PHP Mysql ที่คลิกบนภาพแล้วแสดงภาพขนาดใหญ่ แบบขนาดจริงค่ะ



 

ใครมี code PHP Mysql ที่คลิกบนภาพแล้วแสดงภาพขนาดใหญ่ แบบขนาดจริงค่ะ

 



Topic : 135590



โพสกระทู้ ( 19 )
บทความ ( 0 )



สถานะออฟไลน์




โค้ดนี้ทำให้รูปภาพขยายขนาดใหญ่ขึ้นเมื่อชี้เมาส์ แต่โค้ดไม่ทำงานบนมือถือค่ะ


Code (PHP)
echo "<td><img onmouseover='bigImg(this)' onmouseout='normalImg(this)' border='1'  src=\"../sysimg/".$row["sys_pic1"]."\" width='130'/></td>";	



บนมือถือต้องใช้ โค้ดนี้ และให้คลิกที่ภาพ จึงจะแสดงภาพต้นฉบับ ที่มีขนาดใหญ่ ต้องเขียนอย่างไรค่ะ?

Code (PHP)
echo "<td><img src=\"../sysimg/".$row["sys_pic1"]."\" width='130'/></td>";




Tag : PHP, MySQL







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2020-10-02 17:59:56 By : Pimpada View : 1857 Reply : 14
 

 

No. 1



โพสกระทู้ ( 4,756 )
บทความ ( 8 )



สถานะออฟไลน์


การทำให้ภาพขยายเมื่อชี้เมาส์ เป็น 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
 


 

No. 2



โพสกระทู้ ( 19 )
บทความ ( 0 )



สถานะออฟไลน์


ขอบคุณ mr.v มากค่ะ กำลังศึกษา link ทีให้มาอย่างละเอียด แต่การคลิกภาพแล้วแสดงหน้าใหม่เป็นภาพใหญ่ (ต้นฉบับ) จาก Mysql ฟิวส์ ที่ชื่อว่า sys_pic1 ซึ่งเก็บชื่อไฟล์ภาพ JPEG ไว้ค่ะ ต้องทำอย่างไรค่ะ


ประวัติการแก้ไข
2020-10-03 09:32:18
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-10-03 09:28:01 By : Pimpada
 

 

No. 3



โพสกระทู้ ( 4,756 )
บทความ ( 8 )



สถานะออฟไลน์


ใช้ <a href="">..</a> ไม่ได้เหรอ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-10-03 11:00:52 By : mr.v
 


 

No. 4



โพสกระทู้ ( 19 )
บทความ ( 0 )



สถานะออฟไลน์


ใช้ <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
 


 

No. 5



โพสกระทู้ ( 4,756 )
บทความ ( 8 )



สถานะออฟไลน์


แสดงว่าไม่ได้อ่านลิ้งค์ที่ให้ไปเลย...

ก็ถ้าอันเดิมมันใช้ได้บนคอมฯ คือมันเป็นการเรียกไปฟังก์ชั่น bigImg(this) และ normalImg(this)
แล้วถ้าต้องการให้ทำงานบนมือถือด้วย ก็อ่านสิครับว่าบนมือถือมันรองรับ event อะไร มันระบุทั้งหมดในลิ้งค์แล้ว มีอยู่แค่ไม่กี่อันเอง https://www.w3schools.com/jsref/obj_touchevent.asp
Quote:
ontouchcancel The event occurs when the touch is interrupted
ontouchend The event occurs when a finger is removed from a touch screen
ontouchmove The event occurs when a finger is dragged across the screen
ontouchstart The event occurs when a finger is placed on a touch screen


มันก็น่าจะเป็น ontouchstart กับ ontouchend ก็เทียบใช้เอากับ onmouseover กับ onmouseout คือเพิ่มเข้าไปให้มันทำงานทั้งกับเมาส์และจอสัมผัสก็แค่นั้น.
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-10-03 14:33:49 By : mr.v
 


 

No. 6



โพสกระทู้ ( 19 )
บทความ ( 0 )



สถานะออฟไลน์


ใช้ 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>";	


145744A
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-10-03 14:58:49 By : Pimpada
 


 

No. 7



โพสกระทู้ ( 9,587 )
บทความ ( 2 )



สถานะออฟไลน์


การแสดงภาพ อะไรสักอย่างควร คำนวณขนาดภาพก่อน หา กว้าง/ยาว ของภาพ
แล้วไปคำนวณ กว้าง/ยาว ของหน้าจอ จะจัดขนาดอะไรเท่าไหร่ ก็ว่าไป
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-10-03 17:43:57 By : Chaidhanan
 


 

No. 8



โพสกระทู้ ( 4,756 )
บทความ ( 8 )



สถานะออฟไลน์


งง
ก่อนหน้า พอผมบอกให้ใช้ <a> คุณบอกได้ชื่อไฟล์มาด้วย
พอตอนนี้ถามว่าใช้ <a> ได้ไหม
จะใช้ <a> เปิดหน้าใหม่ก็กำหนด target ไปสิครับ ....................................................................................
attribute target อะ ทำได้เนาะ?


หรือไม่งั้นก็หาสำเร็จรูปมาใช้เอาเลย lightbox, modal dialog หาเอา
http://thenewcode.com/962/A-Modern-HTML5-Lightbox-in-12-Lines-of-JavaScript
https://dimsemenov.com/plugins/magnific-popup/
https://sorgalla.com/lity/
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-10-03 22:19:21 By : mr.v
 


 

No. 9



โพสกระทู้ ( 4,756 )
บทความ ( 8 )



สถานะออฟไลน์


คุณจขกท.เอามาแค่โค้ดตรงแสดงรูปภาพ ไม่เอาส่วน function ที่เรียกใช้มา ไม่มี css มา แล้วบอกว่าชี้เมาส์ทำงานได้. ซึ่งคงไม่มีใครเดาออกว่าทำงานได้ แบบไหน? เดาว่าคงมีตำแหน่งรูปเล็ก เอาเมาส์ชี้แล้วมีรูปใหญ่เหนือรูปเล็ก.

ทีนี้พอจะให้ทำงานในมือถือ บอกว่ามันไม่เต็มจอ แล้ว event เหล่านั้นมันรองรับการเริ่มแตะจอ และการสิ้นสุดแตะจอ คือเอานิ้วออก ดังนั้นถ้าจะให้ภาพมันเต็มจอ มันก็จะมีปัญหากับการใช้งาน (UX) อีก คือแตะแล้วภาพใหญ่มาบังรูปย่อ แล้ว event แตะภาพก็หยุดทำงาน แล้วภาพก็จะกลับไปเล็ก ทั้งที่นิ้วยังแตะอยู่ ก็จะกลับมาใหญ่อีก แล้วก็กลับไปเล็กเองอีก มันก็เป็นไปได้ที่จะลงเอยมีปัญหาแบบนี้. ดังนั้นการใช้งานแบบนี้ ใช้ของสำเร็จรูปที่เขาทำมาจะดีที่สุด คือมันจะรองรับทั้งคอมพิวเตอร์และมือถือเลย รองรับเมาส์และมือแตะจอ แตะทีขยาย แตะอีกทีปิด ไม่ต้องมาแก้ปัญหา event เองให้วุ่น และถ้าหาที่มันรองรับ responsive ได้ก็ไม่ต้องมาตามแก้ css responsive อีก เรียกว่าเอามาใช้ปัญหาจบหมด.
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-10-03 22:33:03 By : mr.v
 


 

No. 10



โพสกระทู้ ( 19 )
บทความ ( 0 )



สถานะออฟไลน์


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
 


 

No. 11



โพสกระทู้ ( 1,458 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter Facebook Blogger

a href ครอบที่ใดที่นั่น ก็จะคลิกได้...ดังนั้น ครอบ <img> ด้วยครับ มันถึงจะคลิกได้
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-10-09 16:05:48 By : PhrayaDev
 


 

No. 12

Guest


สำเร็จแล้วค่ะ ขอบคุณทุกท่านนะคะ 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
 


 

No. 13



โพสกระทู้ ( 4,756 )
บทความ ( 8 )



สถานะออฟไลน์


แสดงว่าแม้แต่ html ก็งงสินะ ผมก็บอกตั้งแต่คห.3 ว่าเอา a ครอบ ถ้าเข้าใจทำไปก็เสร็จนานแล้วปะ?
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-10-09 17:52:19 By : mr.v
 


 

No. 14

Guest


ใช่ค่ะ mr.v "ใช้ <a href="">..</a> ไม่ได้เหรอ" ตั้งแต่ตอนแรก ยอมรับว่าเบลอค่ะ มีหลาย project จนตอนนี้ เส้นเลือดโปง 2 ขมับเลยค่ะ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-10-09 18:00:46 By : Pim
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : ใครมี code PHP Mysql ที่คลิกบนภาพแล้วแสดงภาพขนาดใหญ่ แบบขนาดจริงค่ะ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

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

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 02
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่