โค้ด: เลือกทั้งหมด
<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>
โค้ด: เลือกทั้งหมด
$('.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'));
});
หลังจากนั้นให้ แทนค่ากัน $('#largeImage') แสดง src ของรูปเล็ก $('#description') แสดงคำอธิบายของ รูปเล็ก
ผลลัพธ์
ข้อมูลจาก
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