Image Lightbox Component
A responsive image lightbox component with dark mode support. This component displays a gallery of images, and clicking on an image opens a full-screen modal with navigation arrows to browse through the images. It features a close button and uses vibrant colors for highlighting interactive elements. The design is tailored for a business/corporate context, ensuring a professional yet engaging user experience.
HTML Code
<div class="bg-gray-900 min-h-screen p-8">
<h1 class="text-4xl font-bold text-white mb-8 text-center">Our Work</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Image 1 -->
<div class="group cursor-pointer relative" onclick="openLightbox('img1')">
<img id="img1-thumb" src="https://picsum.photos/seed/picsum1/400/300" alt="Image 1" class="w-full h-48 object-cover rounded-lg shadow-lg transform transition duration-500 group-hover:scale-105"/>
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
<p class="text-white text-lg font-semibold">View Project</p>
</div>
</div>
<!-- Image 2 -->
<div class="group cursor-pointer relative" onclick="openLightbox('img2')">
<img id="img2-thumb" src="https://picsum.photos/seed/picsum2/400/300" alt="Image 2" class="w-full h-48 object-cover rounded-lg shadow-lg transform transition duration-500 group-hover:scale-105"/>
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
<p class="text-white text-lg font-semibold">View Project</p>
</div>
</div>
<!-- Image 3 -->
<div class="group cursor-pointer relative" onclick="openLightbox('img3')">
<img id="img3-thumb" src="https://picsum.photos/seed/picsum3/400/300" alt="Image 3" class="w-full h-48 object-cover rounded-lg shadow-lg transform transition duration-500 group-hover:scale-105"/>
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
<p class="text-white text-lg font-semibold">View Project</p>
</div>
</div>
<!-- Image 4 -->
<div class="group cursor-pointer relative" onclick="openLightbox('img4')">
<img id="img4-thumb" src="https://picsum.photos/seed/picsum4/400/300" alt="Image 4" class="w-full h-48 object-cover rounded-lg shadow-lg transform transition duration-500 group-hover:scale-105"/>
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
<p class="text-white text-lg font-semibold">View Project</p>
</div>
</div>
<!-- Image 5 -->
<div class="group cursor-pointer relative" onclick="openLightbox('img5')">
<img id="img5-thumb" src="https://picsum.photos/seed/picsum5/400/300" alt="Image 5" class="w-full h-48 object-cover rounded-lg shadow-lg transform transition duration-500 group-hover:scale-105"/>
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
<p class="text-white text-lg font-semibold">View Project</p>
</div>
</div>
<!-- Image 6 -->
<div class="group cursor-pointer relative" onclick="openLightbox('img6')">
<img id="img6-thumb" src="https://picsum.photos/seed/picsum6/400/300" alt="Image 6" class="w-full h-48 object-cover rounded-lg shadow-lg transform transition duration-500 group-hover:scale-105"/>
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
<p class="text-white text-lg font-semibold">View Project</p>
</div>
</div>
</div>
<!-- Lightbox Modal -->
<div id="lightbox-modal" class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 hidden">
<div class="relative w-11/12 max-w-4xl max-h-[90vh] flex flex-col">
<button class="absolute top-4 right-4 text-white text-3xl font-bold p-2 hover:text-red-500 transition-colors duration-300 z-10" onclick="closeLightbox()">×</button>
<img id="lightbox-img" src="" alt="Lightbox Image" class="max-w-full max-h-full object-contain rounded-lg shadow-xl"/>
<div class="absolute bottom-4 left-0 right-0 flex justify-between px-4">
<button class="bg-purple-600 text-white p-3 rounded-full hover:bg-purple-700 transition-colors duration-300 shadow-lg" onclick="changeImage(-1)">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
</button>
<button class="bg-purple-600 text-white p-3 rounded-full hover:bg-purple-700 transition-colors duration-300 shadow-lg" onclick="changeImage(1)">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
<p id="lightbox-caption" class="text-white text-center mt-4 text-lg"></p>
</div>
</div>
</div>
<script>
const images = [
{ id: 'img1', src: 'https://picsum.photos/seed/picsum1/800/600', caption: 'Project Alpha - Innovative Solutions' },
{ id: 'img2', src: 'https://picsum.photos/seed/picsum2/800/600', caption: 'Project Beta - Strategic Partnerships' },
{ id: 'img3', src: 'https://picsum.photos/seed/picsum3/800/600', caption: 'Project Gamma - Creative Designs' },
{ id: 'img4', src: 'https://picsum.photos/seed/picsum4/800/600', caption: 'Project Delta - Digital Transformation' },
{ id: 'img5', src: 'https://picsum.photos/seed/picsum5/800/600', caption: 'Project Epsilon - Global Reach' },
{ id: 'img6', src: 'https://picsum.photos/seed/picsum6/800/600', caption: 'Project Zeta - Future Technologies' }
];
let currentIndex = 0;
function openLightbox(imageId) {
const index = images.findIndex(img => img.id === imageId);
if (index !== -1) {
currentIndex = index;
updateLightboxContent();
document.getElementById('lightbox-modal').classList.remove('hidden');
}
}
function closeLightbox() {
document.getElementById('lightbox-modal').classList.add('hidden');
}
function changeImage(direction) {
currentIndex = (currentIndex + direction + images.length) % images.length;
updateLightboxContent();
}
function updateLightboxContent() {
const currentImage = images[currentIndex];
document.getElementById('lightbox-img').src = currentImage.src;
document.getElementById('lightbox-caption').textContent = currentImage.caption;
}
// Close lightbox on escape key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
closeLightbox();
}
});
</script>Related Components
Image Lightbox Component
A retro/vintage image lightbox component with vibrant colors, responsive design, and dark theme support, suitable for portfolios.
Image Lightbox Component
A responsive image lightbox component with a minimalist flat design, monochromatic color scheme, and moderate complexity, suitable for social media interfaces. It supports a dark theme using Tailwind CSS's dark: prefix and does not require JavaScript. Images are sourced from picsum.photos.
Image Lightbox Component
A responsive Image Lightbox component designed in Material Design style, featuring a triadic color scheme and support for dark mode. It's suitable for portfolio showcasing work or products.