การทำรูปภาพให้ซูมได้ด้วย Jquery
การทำรูปภาพให้สามารถซูมได้นั้นให้นึกถึงเวลาเราจะไปซื้อของออนไลน์ที่ในเว็บต่างๆหากเราสนใจสินค้าตัวไหนเราสามารถที่จะดูสินค้าให้ละเอียดได้แค่เอาเคอเซอร์เม้าส์ไปชี้ที่จุดใดจุดนึงของรูปภาพที่เราต้องการจะซูมได้โดยมีวิธีการทำดังนี้
วิธีการทำรูปภาพให้ซูมได้
- 1.เพิ่ม CSS ไปในส่วนของแท็ก <head>
โค้ด: เลือกทั้งหมด
<link href="css/cssimg.css" rel="stylesheet" type="text/css"/>
โค้ด: เลือกทั้งหมด
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/jquery.media.js" type="text/javascript"></script>
<script src="js/functions.js" type="text/javascript"></script>
<script src="js/validateForm.js" type="text/javascript"></script>
<script src="js/mojomagnify.js" type="text/javascript"></script>
โค้ด: เลือกทั้งหมด
<img src="img/dog.jpeg" name="myimage" id="myimage" data-magnifysrc="img/full_dog.jpg" />
- คำอธิบาย
src="img/dog.jpeg" ระบุรูปที่ต้องการจะแสดงโดยจะต้องเล็กกว่ารูปที่จะเรียกในอิลีเม้น data-magnifysrc โดยใน data-magnifysrc จะระบุรูปภาพที่มีขนาดใหญ่กว่าในอิลีเม้น src
4.รวมโค้ด
โค้ด: เลือกทั้งหมด
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test</title>
<link href="css/cssimg.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/jquery.media.js" type="text/javascript"></script>
<script src="js/functions.js" type="text/javascript"></script>
<script src="js/validateForm.js" type="text/javascript"></script>
<script src="js/mojomagnify.js" type="text/javascript"></script>
</head>
<body>
<img src="img/dog.jpeg" name="myimage" id="myimage" data-magnifysrc="img/full_dog.jpg" />
</body>
</html>
- o1 (1).jpg (38.44 KiB) Viewed 2833 times
ในการซูมรูปภาพสามารถเอาไปดัดแปลงใช้กับตัวเว็บขายสินค้าได้หรือเว็บอื่นๆได้ที่ต้องการจะทำแบบนี้ได้สามารถดาวน์โหลดไปทดลองเล่นได้
ที่นี่
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Jquery
[b][size=150][color=#FF4040]การทำรูปภาพให้ซูมได้ด้วย Jquery[/color][/size][/b]
การทำรูปภาพให้สามารถซูมได้นั้นให้นึกถึงเวลาเราจะไปซื้อของออนไลน์ที่ในเว็บต่างๆหากเราสนใจสินค้าตัวไหนเราสามารถที่จะดูสินค้าให้ละเอียดได้แค่เอาเคอเซอร์เม้าส์ไปชี้ที่จุดใดจุดนึงของรูปภาพที่เราต้องการจะซูมได้โดยมีวิธีการทำดังนี้
[b]วิธีการทำรูปภาพให้ซูมได้[/b]
[list]1.เพิ่ม [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css/2656-%E0%B8%9A%E0%B8%97%E0%B8%97%E0%B8%B5%E0%B9%88-1-%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B9%80%E0%B8%9A%E0%B8%B7%E0%B9%89%E0%B8%AD%E0%B8%87%E0%B8%95%E0%B9%89%E0%B8%99%E0%B9%80%E0%B8%81%E0%B8%B5%E0%B9%88%E0%B8%A2%E0%B8%A7%E0%B8%81%E0%B8%B1%E0%B8%9A-css3.html]CSS[/url] ไปในส่วนของแท็ก <head>
[code]<link href="css/cssimg.css" rel="stylesheet" type="text/css"/>[/code]
2.เพิ่ม [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-jquery/2776-%E0%B8%9A%E0%B8%97%E0%B8%97%E0%B8%B5%E0%B9%88-1-jquery-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]Jquery[/url] ไปในส่วนของแท็ก <head>
[code]<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/jquery.media.js" type="text/javascript"></script>
<script src="js/functions.js" type="text/javascript"></script>
<script src="js/validateForm.js" type="text/javascript"></script>
<script src="js/mojomagnify.js" type="text/javascript"></script>[/code]
3.จากนั้นในส่วนของแท็ก <body> ก็ใส่แท็ก <img>ไปดังโค้ด
[code]<img src="img/dog.jpeg" name="myimage" id="myimage" data-magnifysrc="img/full_dog.jpg" />[/code]
[list][b]คำอธิบาย[/b]
src="img/dog.jpeg" ระบุรูปที่ต้องการจะแสดงโดยจะต้องเล็กกว่ารูปที่จะเรียกในอิลีเม้น data-magnifysrc โดยใน data-magnifysrc จะระบุรูปภาพที่มีขนาดใหญ่กว่าในอิลีเม้น src
[/list]
4.รวมโค้ด
[code]<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test</title>
<link href="css/cssimg.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/jquery.media.js" type="text/javascript"></script>
<script src="js/functions.js" type="text/javascript"></script>
<script src="js/validateForm.js" type="text/javascript"></script>
<script src="js/mojomagnify.js" type="text/javascript"></script>
</head>
<body>
<img src="img/dog.jpeg" name="myimage" id="myimage" data-magnifysrc="img/full_dog.jpg" />
</body>
</html>[/code]
5.ผลลัพธ์ที่ได้ดังรูป
[attachment=0]o1 (1).jpg[/attachment]
[/list]
ในการซูมรูปภาพสามารถเอาไปดัดแปลงใช้กับตัวเว็บขายสินค้าได้หรือเว็บอื่นๆได้ที่ต้องการจะทำแบบนี้ได้สามารถดาวน์โหลดไปทดลองเล่นได้ [url=https://www.mindphp.com/download/all-download/documents/487-jquery-zoom.html]ที่นี่[/url]
[b]ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Jquery[/b]
[list]
-[url=https://www.mindphp.com/forums/viewforum.php?f=18]สอบถามเกี่ยวกับ JavaScript & Jquery Ajax[/url]
-[url=https://www.mindphp.com/forums/viewforum.php?f=3]ถาม - ตอบ คอมพิวเตอร์[/url]
-[url=https://www.mindphp.com/forums/viewforum.php?f=20]สอบถามเกี่ยวกับ HTML CSS[/url]
-[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-jquery.html]บทเรียน Jquery[/url]
-[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-javascript.html]บทเรียน Javascript[/url]
-[url=https://www.mindphp.com/developer/36-jquery.html]เรียนรู้ Jquery[/url]
[/list]