Mini Project — สร้าง Web Images Gallery แบบง่ายๆ

🙏 สวัสดีครับเพื่อนๆ วันนี้ผมจะพามาทดลองทำ Web Images Gallery ด้วย HTML, CSS and JavaScript สำหรับไว้แสดงรูปภาพที่เรามีไว้ดูเองหรือโชว์ลงหน้าเว็บเพจของตัวเองก็ได้ โดยผมจะใช้รูปภาพจาก Unsplash.com มาเป็นตัวอย่างนะครับ (ดูแหล่งรูปภาพฟรีได้ที่ แหล่งรูปฟรี ไม่มีลิขสิทธิ์)

ก่อนอื่นๆ มาดูก่อนว่าผมอยากจะได้หน้าตา Gallery ให้ออกมาในรูปทรงหัวใจเพื่อเข้ากับรูปภาพที่เลือกมาที่เป็นแนว Wedding ก็จะได้หน้าตาออกมาแนวนี้


1. สร้างไฟล์ และกำหนด Folder

— ใน Project Folder ผมจะให้มี Images Folder สำหรับเก็บรูปภาพที่ต้องการ และไฟล์ index.html, style.css และ script.js 3 ไฟล์หลักในการทำ Web Images Gallery นี้

2. สร้างไฟล์ html และ css

— สร้างไฟล์ index.html โดยจะมีส่วนที่เป็น Gallery และส่วนที่เป็น Modal ไว้แสดงรูปแต่ละรูปเมื่อคลิ๊กที่รูปภาพนั้นๆ

— ผมจะใช้ CSS Grid ในการกำหนดให้รูปต่างๆ และจะให้แสดงผลใน Gird ที่ต้องการเพื่อให้ได้เป็นรูปร่างหัวใจตามที่ต้องการ สำหรับ Modal Style นั้นดูที่มาได้ที่ https://www.w3schools.com/howto/howto_css_modal_images.asp

— ได้หน้าตาของ CSS Grid ออกมาประมาณนี้

3. สร้างไฟล์ javascript

— มาถึงขั้นตอนสุดท้ายมาสร้างไฟล์ JavaScript สำหรับ Show รูปภาพผ่าน Modal จะได้ออกมาประมาณนี้

ฟังก์ชัน getImages กำหนด src ของแต่ละรูปภาพ โดยแต่ละรูปภาพกำหนด onclick event ให้แสดงรูปภาพแบบ Modal


ท้ายสุด เพื่อนๆ สามารถนำไปประยุกต์ใช้ได้ตามรูปแบบที่ต้องการเลยครับ หรือจะใช้ API ของ Unsplah ดึงรูปภาพมาแสดงแทนก็ได้ครับ ส่วนโค้ดฉบับสมบูรณ์ผมเตรียมมาให้ใน Repo ด้านล่างนี้เพื่อนๆ สามารถไป Clone เล่นกันได้ตามต้องการครับผม Happy Coding…👨‍💻👨‍💻👨‍💻

Repo Clone 👉 https://github.com/ChaiyachetU/web-images-gallery-with-css-grid


ฝากร้านหนังสือมือสองของผมด้วยครับ เป็นหนังสือซื้อมาอ่านเอง แล้วต้องการขายต่อในราคาที่เป็นกันเอง เพื่อนๆ ที่สนใจสามารถติดตามหนังสือที่จะขาย และสั่งซื้อได้ที่ https://shop.line.me/@921ijoic

โปรโมชั่น คูปองส่วนลด และดีล ที่ดีที่สุดของร้านค้าออนไลน์กว่า 300 แบรนด์พร้อมรับเงินคืนจาก ShopBack
https://bit.ly/3c4tlmV

Ruk-Com จดโดเมน-เช่าโฮสต์ ราคาประหยัด พร้อมให้บริการใน 1 นาที
http://bit.ly/36q8A12