File manager - Edit - /home/kridsana/webapp.cm.in.th/663012801/u66301280015/portfolios/Javascript/imageshow.js
Back
const images = ["project_dufoon/1.png", "project_dufoon/2.png", "project_dufoon/3.jpg", "project_dufoon/4.jpg", "project_dufoon/5.jpg", "project_dufoon/6.jpg", "project_dufoon/7.jpg", "project_dufoon/8.jpg", "project_dufoon/9.jpg", "project_dufoon/10.jpg", "project_dufoon/11.jpg", "project_dufoon/12.jpg", "project_dufoon/13.jpg", "project_dufoon/14.jpg"]; // สร้าง titles อัตโนมัติจากจำนวน images const titles = images.map((image, index) => image ? `รูปภาพที่ ${index + 1}` : `รูปภาพที่ ${index + 1} (ไม่พบภาพ)`); let currentIndex = 0; function handlePopupImageError() { document.getElementById("project-popupImage").src = 'placeholder.png'; document.getElementById("project-popupImage").alt = 'ไม่สามารถโหลดรูปภาพได้'; document.getElementById('errorMessage').textContent = 'ไม่สามารถโหลดรูปภาพบางรูป โปรดตรวจสอบเส้นทางไฟล์'; } function openPopup() { currentIndex = 0; // เริ่มที่รูปแรกเสมอ updateImageDisplay(); document.getElementById("project-imagePopup").style.display = "flex"; } function closePopup() { document.getElementById("project-imagePopup").style.display = "none"; } function changeImage(direction) { currentIndex += direction; if (currentIndex < 0) currentIndex = images.length - 1; if (currentIndex >= images.length) currentIndex = 0; updateImageDisplay(); } function updateImageDisplay() { const popupImage = document.getElementById("project-popupImage"); popupImage.src = images[currentIndex] || 'placeholder.png'; popupImage.alt = titles[currentIndex]; // อัปเดตตัวนับรูปภาพ document.getElementById("project-imageCounter").textContent = `${currentIndex + 1} / ${images.length}`; } // ปิด popup เมื่อคลิกนอกพื้นที่รูปภาพ document.getElementById("project-imagePopup").addEventListener("click", function(event) { if (event.target === this) { closePopup(); } }); // ปิด popup เมื่อกดปุ่ม Escape document.addEventListener("keydown", function(event) { if (event.key === "Escape") { closePopup(); } // เปลี่ยนรูปด้วยปุ่มลูกศร else if (event.key === "ArrowRight") { changeImage(1); } else if (event.key === "ArrowLeft") { changeImage(-1); } }); // โหลดรูปภาพล่วงหน้าเพื่อความรวดเร็ว function preloadImages() { for (let i = 0; i < images.length; i++) { const img = new Image(); img.src = images[i]; } } // เรียกใช้ฟังก์ชันเมื่อโหลดหน้าเว็บ window.onload = preloadImages;
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.39 |
proxy
|
phpinfo
|
Settings