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

เทคนิคนี้นิยมใช้ในเว็บไซต์ เช่น

• เว็บไซต์ขายสินค้า


• เว็บไซต์แสดงแกลเลอรีรูปภาพ


• ระบบอัปโหลดรูปภาพ

โครงสร้าง HTML

เริ่มต้นด้วยการสร้างรูปภาพที่ต้องการให้คลิกเพื่อ Preview

<img src="image1.jpg" class="preview-img" width="200">
<img src="image2.jpg" class="preview-img" width="200">
<div id="imageModal" class="modal">
   <span class="close">×</span>
   <img class="modal-content" id="modalImage">
</div>

การเขียน CSS สำหรับ Modal

.modal {
   display: none;
   position: fixed;
   z-index: 999;
   padding-top: 100px;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.8);
}
.modal-content {
   display: block;
   margin: auto;
   max-width: 80%;
}
.close {
   position: absolute;
   top: 30px;
   right: 40px;
   color: #fff;
   font-size: 35px;
   cursor: pointer;
}

การใช้ jQuery สำหรับเปิด Modal

$(document).ready(function(){
   $(".preview-img").click(function(){
       var imgSrc = $(this).attr("src");
       $("#modalImage").attr("src", imgSrc);
       $("#imageModal").fadeIn();
   });
   $(".close").click(function(){
       $("#imageModal").fadeOut();
   });
});

การโหลด jQuery

อย่าลืมโหลด jQuery ก่อนใช้งาน

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

ตัวอย่างการทำงาน

เมื่อผู้ใช้คลิกที่รูปภาพ

• ระบบจะดึงค่า src ของรูป


• นำรูปไปแสดงใน Modal


• ผู้ใช้สามารถกดปุ่มปิดเพื่อปิดหน้าต่าง Modal ได้

สรุป

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