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

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

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

ภาพประจำตัวสมาชิก
MBMoo
PHP VIP Members
PHP VIP Members
โพสต์: 25602
ลงทะเบียนเมื่อ: 04/06/2020 10:05 am

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

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

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


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

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

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

<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 ใช้งานได้

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

  $('.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 3094 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
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

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