เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

<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'));

    });

วิธีกดภาพ เล็กด้านข้าง แล้วโชว์ภาพใหญ่ ในพื้นที่ดำๆ โดยใช้ [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-javascript.html]javascript[/url] เป็นการออกแบบ โดยใช้ [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2193-css-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]css[/url] ของ bootstrap ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2026-html-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]HTML[/url] เพื่อเป็นการตกแต่งและออกแบบให้สวยงาม



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

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


[code] $('.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'));

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

ผลลัพธ์
[attachment=0]ezgif.com-video-to-gif.gif[/attachment]



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


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