วิธีกดภาพ เล็กด้านข้าง แล้วโชว์ภาพใหญ่ ในพื้นที่ดำๆ โดยใช้ javascript

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

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

bolue
PHP VIP Members
PHP VIP Members
Posts: 1498
Joined: 04/06/2020 10:05 am

วิธีกดภาพ เล็กด้านข้าง แล้วโชว์ภาพใหญ่ ในพื้นที่ดำๆ โดยใช้ javascript

Post by bolue »

วิธีกดภาพ เล็กด้านข้าง แล้วโชว์ภาพใหญ่ ในพื้นที่ดำๆ โดยใช้ javascript เป็นการออกแบบ โดยใช้ css ของ bootstrap ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML เพื่อเป็นการตกแต่งและออกแบบให้สวยงาม


Code: Select all

<img src="1.jpg" id="largeImage" class="thumb">
    <div id="description">description</div>

    <div class="thumbnails">

     <img src="1.jpg" class="thumb" alt="description">
     <img src="2.jpg" class="thumb"alt="description">
     <img src="3.jpg" class="thumb" alt="description">

    </div>
สร้างรูปใหญ่ แล้วตั้งไอดี และคำอธิบาย เสร็จแล้วตั้งรูปเล็กๆ พร้อมคำอธิบาย

Code: Select all

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
หลังจากนั้น import jquery เข้ามานะคะ เพื่อให้ script ใช้งานได้

Code: Select all

  $('.thumbnails img').click(function() {

        var thumbSrc = $('.thumb').attr('src');
        var largeSrc = $('#largeImage').attr('src');
        $('#largeImage').attr('src', $(this).attr('src').replace(thumbSrc, largeSrc));
        $('#description').html($(this).attr('alt'));

    });
เมื่อเลือกรูปจะเอา src พร้อมคำอธิบาย มาแทนที่รูปใหญ่ ตัวแปล thumbSrc จะเก็บค่าของ รูปเล็กเอาไว้ และตัว แปล largeSrc จะเก็บค่า ของ รูปใหญ่
หลังจากนั้นให้ แทนค่ากัน $('#largeImage') แสดง src ของรูปเล็ก $('#description') แสดงคำอธิบายของ รูปเล็ก

ผลลัพธ์
ezgif.com-video-to-gif.gif
ezgif.com-video-to-gif.gif (1.27 MiB) Viewed 296 times


ข้อมูลจาก
stackoverflow.com/questions/612575/whats-the-best-jquery-click-a-thumbnail-and-change-the-main-image-module


ถ้าต้องการเรียนรู้ วิธีกดภาพ เล็กด้านข้าง แล้วโชว์ภาพใหญ่ ในพื้นที่ดำๆ โดยใช้ javascript หรือ การทำงานอื่นๆ ให้ css สามารถเข้ามาดู เพื่มเติมได้ วิธีกดภาพ เล็กด้านข้าง แล้วโชว์ภาพใหญ่ ในพื้นที่ดำๆ โดยใช้ javascript viewtopic.php?f=78&t=67935&p=190121#p190121 หรือ วิธีการ ไล่สีพื้นหลัง โดย css viewtopic.php?f=73&t=67937&p=190127#p190127 หรือ วิธีการสร้าง nav-tabs โดย bootstrap viewtopic.php?f=76&t=67936&p=190125#p190125
  • Similar Topics
    Replies
    Views
    Last post

Return to “Jquery & Ajax Knowledge”

Who is online

Users browsing this forum: No registered users and 7 guests