Modern Glow Lightbox - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Modern Glow Lightbox</title> <style> body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #121212; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .gallery { display: flex; flex-wrap: wrap; gap: 10px; } .gallery img { width: 200px; height: 150px; object-fit: cover; cursor: pointer; border-radius: 10px; transition: transform 0.3s, box-shadow 0.3s; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .gallery img:hover { transform: scale(1.05); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); } .lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); justify-content: center; align-items: center; z-index: 1000; } .lightbox.show { display: flex; animation: fadeIn 0.5s; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .lightbox-content { position: relative; max-width: 80%; max-height: 80%; display: flex; flex-direction: column; align-items: center; border-radius: 20px; box-shadow: 0 0 20px rgba(0, 255, 255, 0.5); } .lightbox-content img { max-width: 100%; max-height: 100%; border-radius: 20px; animation: zoomIn 0.5s; } @keyframes zoomIn { from { transform: scale(0.8); } to { transform: scale(1); } } .lightbox-close { position: absolute; top: 10px; right: 10px; font-size: 30px; cursor: pointer; color: #fff; background: #ff4d4d; border-radius: 50%; padding: 5px 10px; transition: background 0.3s; } .lightbox-close:hover { background: #ff1a1a; } .lightbox-next, .lightbox-prev { position: absolute; top: 50%; transform: translateY(-50%); font-size: 40px; cursor: pointer; color: #fff; background: rgba(0, 0, 0, 0.5); border-radius: 50%; padding: 5px 10px; transition: background 0.3s; } .lightbox-next:hover, .lightbox-prev:hover { background: rgba(0, 0, 0, 0.7); } .lightbox-next { right: 20px; } .lightbox-prev { left: 20px; } .emoji { font-size: 50px; margin-top: 10px; animation: bounce 1s infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-20px); } 60% { transform: translateY(-10px); } } </style> </head> <body> <div class="gallery"> <img src="https://via.placeholder.com/400x300?text=Image+1" alt="Image 1"> <img src="https://via.placeholder.com/400x300?text=Image+2" alt="Image 2"> <img src="https://via.placeholder.com/400x300?text=Image+3" alt="Image 3"> <img src="https://via.placeholder.com/400x300?text=Image+4" alt="Image 4"> </div> <div class="lightbox" id="lightbox"> <div class="lightbox-content"> <span class="lightbox-close" id="lightboxClose">×</span> <span class="lightbox-prev" id="lightboxPrev">❮</span> <img src="" alt="Lightbox Image" id="lightboxImage"> <span class="lightbox-next" id="lightboxNext">❯</span> <div class="emoji">🌟</div> </div> </div> <script> const galleryImages = document.querySelectorAll('.gallery img'); const lightbox = document.getElementById('lightbox'); const lightboxImage = document.getElementById('lightboxImage'); const lightboxClose = document.getElementById('lightboxClose'); const lightboxNext = document.getElementById('lightboxNext'); const lightboxPrev = document.getElementById('lightboxPrev'); let currentImageIndex; function openLightbox(index) { currentImageIndex = index; lightboxImage.src = galleryImages[index].src; lightbox.classList.add('show'); } function closeLightbox() { lightbox.classList.remove('show'); } function nextImage() { currentImageIndex = (currentImageIndex + 1) % galleryImages.length; lightboxImage.src = galleryImages[currentImageIndex].src; } function prevImage() { currentImageIndex = (currentImageIndex - 1 + galleryImages.length) % galleryImages.length; lightboxImage.src = galleryImages[currentImageIndex].src; } galleryImages.forEach((img, index) => { img.addEventListener('click', () => openLightbox(index)); }); lightboxClose.addEventListener('click', closeLightbox); lightboxNext.addEventListener('click', nextImage); lightboxPrev.addEventListener('click', prevImage); lightbox.addEventListener('click', (e) => { if (e.target === lightbox) { closeLightbox(); } }); </script> </body> </html>