การทำรูปภาพให้ซูมได้ด้วย Jquery

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 4859
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

การทำรูปภาพให้ซูมได้ด้วย Jquery

โพสต์ที่ยังไม่ได้อ่าน โดย Parichat »

การทำรูปภาพให้ซูมได้ด้วย Jquery

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

วิธีการทำรูปภาพให้ซูมได้
  • 1.เพิ่ม CSS ไปในส่วนของแท็ก <head>

    โค้ด: เลือกทั้งหมด

    <link href="css/cssimg.css" rel="stylesheet" type="text/css"/>
    2.เพิ่ม Jquery ไปในส่วนของแท็ก <head>

    โค้ด: เลือกทั้งหมด

    <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>
    3.จากนั้นในส่วนของแท็ก <body> ก็ใส่แท็ก <img>ไปดังโค้ด

    โค้ด: เลือกทั้งหมด

    <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>
    5.ผลลัพธ์ที่ได้ดังรูป
    o1 (1).jpg
    o1 (1).jpg (38.44 KiB) Viewed 2803 times
ในการซูมรูปภาพสามารถเอาไปดัดแปลงใช้กับตัวเว็บขายสินค้าได้หรือเว็บอื่นๆได้ที่ต้องการจะทำแบบนี้ได้สามารถดาวน์โหลดไปทดลองเล่นได้ ที่นี่


ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Jquery
Live Simply, Laugh Often, Love Deeply.....
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 76