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

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

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

ภาพประจำตัวสมาชิก
Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 1857
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

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

โพสต์โดย Parichat » 26/06/2018 12:02 pm

การทำรูปภาพให้ซูมได้ด้วย 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) เปิดดู 145 ครั้ง


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


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

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

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

กำลังดูบอร์ดนี้: 4 และ บุคคลทั่วไป 0 ท่าน