Bild-Lightbox-Komponente
Eine reaktionsschnelle Bild-Lightbox-Komponente mit Unterstützung für den Dunkelmodus. Diese Komponente zeigt eine Bildergalerie an, und wenn Sie auf ein Bild klicken, wird ein Vollbildmodal mit Navigationspfeilen zum Durchsuchen der Bilder geöffnet. Es verfügt über eine Schließen-Schaltfläche und verwendet lebendige Farben, um interaktive Elemente hervorzuheben. Das Design ist auf den Geschäfts-/Unternehmenskontext zugeschnitten und gewährleistet eine professionelle und dennoch ansprechende Benutzererfahrung.
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>Verwandte Komponenten
Glassmorphism Lightbox mit Sepia-Tönen für Immobilien
Eine responsive Bild-Lightbox-Komponente mit einem Glasmorphismus-Design mit mattglasähnlichen durchscheinenden Elementen und Sepia-/Brauntönen, die sich für Bildergalerien von Immobilien eignen. Enthält Unterstützung für den Dunkelmodus.
Image Lightbox-Komponente für Job-/Karriereplattformen
Eine klare, minimalistische Bild-Lightbox-Komponente mit Schweizer Designeinflüssen und blauer Farbgebung, die sich für Jobbörsen oder Karriereplattformen eignet. Es unterstützt Reaktionsfähigkeit und Dunkelmodus, sodass Benutzer Bilder in einem überlagerten Popup anzeigen können.
Bild-Lightbox-Komponente
Eine responsive Bild-Lightbox-Komponente, die im Glassmorphism-Stil unter Verwendung von Tailwind CSS erstellt wurde. Die Komponente unterstützt ein dunkles Theme mit mattglasähnlichen durchscheinenden Elementen und Unschärfeeffekten.