Bild-Lightbox

Bild-Lightbox-Komponente

Eine Retro-/Vintage-Bild-Lightbox-Komponente mit lebendigen Farben, responsivem Design und Unterstützung für dunkle Themen, die für Portfolios geeignet ist.

Vorschau öffnen

                <div class="p-8 bg-gradient-to-br from-purple-700 via-pink-500 to-red-500 dark:from-gray-900 dark:via-purple-900 dark:to-black min-h-screen">
  <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white mb-8 text-center drop-shadow-lg font-mono">My Rad Portfolio</h1>
  
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
    <!-- Image 1 -->
    <div class="relative group cursor-pointer">
      <img src="https://picsum.photos/seed/vintage1/600/400" alt="Portfolio Image 1" class="rounded-lg shadow-xl transform transition-all duration-300 group-hover:scale-105 group-hover:ring-8 group-hover:ring-yellow-400 group-hover:ring-offset-8 group-hover:ring-offset-purple-700 dark:group-hover:ring-offset-gray-900 border-4 border-yellow-300 dark:border-yellow-500">
      <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
        <p class="text-white text-xl font-bold font-mono">Project Alpha</p>
      </div>
    </div>

    <!-- Image 2 -->
    <div class="relative group cursor-pointer">
      <img src="https://picsum.photos/seed/retro2/600/400" alt="Portfolio Image 2" class="rounded-lg shadow-xl transform transition-all duration-300 group-hover:scale-105 group-hover:ring-8 group-hover:ring-yellow-400 group-hover:ring-offset-8 group-hover:ring-offset-purple-700 dark:group-hover:ring-offset-gray-900 border-4 border-yellow-300 dark:border-yellow-500">
      <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
        <p class="text-white text-xl font-bold font-mono">Cyberpunk City</p>
      </div>
    </div>

    <!-- Image 3 -->
    <div class="relative group cursor-pointer">
      <img src="https://picsum.photos/seed/80sglitch/600/400" alt="Portfolio Image 3" class="rounded-lg shadow-xl transform transition-all duration-300 group-hover:scale-105 group-hover:ring-8 group-hover:ring-yellow-400 group-hover:ring-offset-8 group-hover:ring-offset-purple-700 dark:group-hover:ring-offset-gray-900 border-4 border-yellow-300 dark:border-yellow-500">
      <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
        <p class="text-white text-xl font-bold font-mono">Neon Dreams</p>
      </div>
    </div>

    <!-- Image 4 -->
    <div class="relative group cursor-pointer">
      <img src="https://picsum.photos/seed/vaporwave/600/400" alt="Portfolio Image 4" class="rounded-lg shadow-xl transform transition-all duration-300 group-hover:scale-105 group-hover:ring-8 group-hover:ring-yellow-400 group-hover:ring-offset-8 group-hover:ring-offset-purple-700 dark:group-hover:ring-offset-gray-900 border-4 border-yellow-300 dark:border-yellow-500">
      <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
        <p class="text-white text-xl font-bold font-mono">Synthwave Sunset</p>
      </div>
    </div>
    
    <!-- Image 5 -->
    <div class="relative group cursor-pointer">
      <img src="https://picsum.photos/seed/gridscape/600/400" alt="Portfolio Image 5" class="rounded-lg shadow-xl transform transition-all duration-300 group-hover:scale-105 group-hover:ring-8 group-hover:ring-yellow-400 group-hover:ring-offset-8 group-hover:ring-offset-purple-700 dark:group-hover:ring-offset-gray-900 border-4 border-yellow-300 dark:border-yellow-500">
      <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
        <p class="text-white text-xl font-bold font-mono">Pixel Paradise</p>
      </div>
    </div>

    <!-- Image 6 -->
    <div class="relative group cursor-pointer">
      <img src="https://picsum.photos/seed/datascape/600/400" alt="Portfolio Image 6" class="rounded-lg shadow-xl transform transition-all duration-300 group-hover:scale-105 group-hover:ring-8 group-hover:ring-yellow-400 group-hover:ring-offset-8 group-hover:ring-offset-purple-700 dark:group-hover:ring-offset-gray-900 border-4 border-yellow-300 dark:border-yellow-500">
      <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
        <p class="text-white text-xl font-bold font-mono">Binary Bliss</p>
      </div>
    </div>
  </div>

  <!-- Retro Footer -->
  <footer class="mt-16 text-center text-white text-lg font-mono drop-shadow-md">
    <p>&copy; 2023 My Rad Portfolio. All Rights Reserved, Dude.</p>
  </footer>
</div>

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.

Vorschau öffnen

                <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()">&times;</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>

Bild-Lightbox-Komponente

Eine responsive Bild-Lightbox-Komponente mit minimalistischem, flachem Design, monochromatischem Farbschema und moderater Komplexität, die für Social-Media-Schnittstellen geeignet ist. Es unterstützt ein dunkles Theme mit dem Präfix dark: von Tailwind CSS und benötigt kein JavaScript. Die Bilder stammen von picsum.photos.

Vorschau öffnen

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <!-- Image 1 -->
        <div class="relative group cursor-pointer">
            <img src="https://picsum.photos/seed/image1/600/400" alt="Image 1" class="rounded-lg shadow-md transition-transform transform 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 rounded-lg">
                <p class="text-white text-lg font-semibold">View Image</p>
            </div>
        </div>

        <!-- Image 2 -->
        <div class="relative group cursor-pointer">
            <img src="https://picsum.photos/seed/image2/600/400" alt="Image 2" class="rounded-lg shadow-md transition-transform transform 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 rounded-lg">
                <p class="text-white text-lg font-semibold">View Image</p>
            </div>
        </div>

        <!-- Image 3 -->
        <div class="relative group cursor-pointer">
            <img src="https://picsum.photos/seed/image3/600/400" alt="Image 3" class="rounded-lg shadow-md transition-transform transform 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 rounded-lg">
                <p class="text-white text-lg font-semibold">View Image</p>
            </div>
        </div>

        <!-- Image 4 -->
        <div class="relative group cursor-pointer">
            <img src="https://picsum.photos/seed/image4/600/400" alt="Image 4" class="rounded-lg shadow-md transition-transform transform 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 rounded-lg">
                <p class="text-white text-lg font-semibold">View Image</p>
            </div>
        </div>

        <!-- Image 5 -->
        <div class="relative group cursor-pointer">
            <img src="https://picsum.photos/seed/image5/600/400" alt="Image 5" class="rounded-lg shadow-md transition-transform transform 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 rounded-lg">
                <p class="text-white text-lg font-semibold">View Image</p>
            </div>
        </div>

        <!-- Image 6 -->
        <div class="relative group cursor-pointer">
            <img src="https://picsum.photos/seed/image6/600/400" alt="Image 6" class="rounded-lg shadow-md transition-transform transform 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 rounded-lg">
                <p class="text-white text-lg font-semibold">View Image</p>
            </div>
        </div>
    </div>

    <!-- Lightbox Overlay (Hidden by default, would be shown with JS) -->
    <div id="lightbox" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
        <div class="relative">
            <img src="" alt="Lightbox Image" id="lightbox-image" class="max-w-3xl max-h-3xl rounded-lg shadow-lg">
            <button class="absolute top-4 right-4 text-white text-3xl">&times;</button>
        </div>
    </div>
</div>

Bild-Lightbox-Komponente

Eine komplexe Image-Lightbox-Komponente, die mit skeuomorphen Elementen und einem pastellfarbenen Farbschema entworfen wurde und für Dashboard-Umgebungen geeignet ist. Es enthält ein responsives Layout, Unterstützung für dunkle Themen und eine interaktive Benutzeroberfläche.

Vorschau öffnen

                <div class="fixed inset-0 flex items-center justify-center z-50 bg-gray-900 bg-opacity-75 dark:bg-black">
    <div class="bg-gradient-to-br from-pink-300 to-blue-300 rounded-xl shadow-xl p-5 w-full max-w-3xl relative">
        <button class="absolute top-2 right-2 text-gray-700 dark:text-gray-300 font-bold text-lg hover:text-gray-900 dark:hover:text-white transition">
            &times;
        </button>
        <div class="flex justify-center mb-5">
            <img src="https://picsum.photos/600/400" alt="Lightbox Image" class="rounded-lg shadow-lg max-w-full h-auto brightness-90 dark:brightness-75">
        </div>
        <div class="grid grid-cols-3 gap-4">
            <img src="https://picsum.photos/200/150?random=1" alt="Thumbnail 1" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=2" alt="Thumbnail 2" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=3" alt="Thumbnail 3" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=4" alt="Thumbnail 4" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=5" alt="Thumbnail 5" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=6" alt="Thumbnail 6" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
        </div>
        <div class="flex justify-between items-center mt-5">
            <button class="bg-white text-gray-800 rounded-md px-4 py-2 shadow hover:bg-gray-100 transition">Previous</button>
            <button class="bg-white text-gray-800 rounded-md px-4 py-2 shadow hover:bg-gray-100 transition">Next</button>
        </div>
    </div>
</div>

Bild-Lightbox-Komponente

Eine responsive Image-Lightbox-Komponente, die mit 3D-Elementen, lebendigen Farben und moderater Komplexität für Geschäfts-/Unternehmenswebsites entwickelt wurde. Es unterstützt das Styling im Dunkelmodus mit Tailwind CSS.

Vorschau öffnen

                <div class="relative p-4 max-w-lg mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <!-- Thumbnail Images -->
        <div class="group">
            <div class="relative overflow-hidden rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
                <img src="https://picsum.photos/400/300?random=1" alt="Image 1" class="w-full h-full object-cover rounded-lg">
                <div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-black bg-opacity-50">
                    <button class="bg-vibrant-500 text-white rounded-full p-2 focus:outline-none">View</button>
                </div>
            </div>
        </div>
        <div class="group">
            <div class="relative overflow-hidden rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
                <img src="https://picsum.photos/400/300?random=2" alt="Image 2" class="w-full h-full object-cover rounded-lg">
                <div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-black bg-opacity-50">
                    <button class="bg-vibrant-500 text-white rounded-full p-2 focus:outline-none">View</button>
                </div>
            </div>
        </div>
        <div class="group">
            <div class="relative overflow-hidden rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
                <img src="https://picsum.photos/400/300?random=3" alt="Image 3" class="w-full h-full object-cover rounded-lg">
                <div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-black bg-opacity-50">
                    <button class="bg-vibrant-500 text-white rounded-full p-2 focus:outline-none">View</button>
                </div>
            </div>
        </div>
        <div class="group">
            <div class="relative overflow-hidden rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
                <img src="https://picsum.photos/400/300?random=4" alt="Image 4" class="w-full h-full object-cover rounded-lg">
                <div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-black bg-opacity-50">
                    <button class="bg-vibrant-500 text-white rounded-full p-2 focus:outline-none">View</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Dark Mode Support -->
<style>
    .bg-vibrant-500 {
        background-color: #ff4c4c; /* Example vibrant color */
    }

    @media (prefers-color-scheme: dark) {
        .bg-vibrant-500 {
            background-color: #ff6b6b; /* Dark mode vibrant color */
        }
    }
</style>

Bild-Lightbox-Komponente

Eine responsive Bild-Lightbox-Komponente mit Retro-/Vintage-Design und Erdton-Farbschema, geeignet für Armaturenbretter.

Vorschau öffnen

                <div class="relative w-full p-4 max-w-4xl mx-auto">
    <!-- Thumbnail images -->
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        <img src="https://picsum.photos/300/200?random=1" alt="Image 1" class="rounded-lg cursor-pointer transition-transform duration-200 transform hover:scale-105 dark:shadow-lg dark:shadow-yellow-600" onclick="openModal('https://picsum.photos/800/600?random=1')" />
        <img src="https://picsum.photos/300/200?random=2" alt="Image 2" class="rounded-lg cursor-pointer transition-transform duration-200 transform hover:scale-105 dark:shadow-lg dark:shadow-yellow-600" onclick="openModal('https://picsum.photos/800/600?random=2')" />
        <img src="https://picsum.photos/300/200?random=3" alt="Image 3" class="rounded-lg cursor-pointer transition-transform duration-200 transform hover:scale-105 dark:shadow-lg dark:shadow-yellow-600" onclick="openModal('https://picsum.photos/800/600?random=3')" />
        <img src="https://picsum.photos/300/200?random=4" alt="Image 4" class="rounded-lg cursor-pointer transition-transform duration-200 transform hover:scale-105 dark:shadow-lg dark:shadow-yellow-600" onclick="openModal('https://picsum.photos/800/600?random=4')" />
    </div>

    <!-- Modal overlay -->
    <div id="imageModal" class="fixed inset-0 z-50 hidden bg-black bg-opacity-75 justify-center items-center dark:bg-opacity-90" onclick="closeModal()">
        <div class="relative w-11/12 md:w-3/4 lg:w-2/3">
            <span class="absolute top-2 right-2 text-white cursor-pointer" onclick="closeModal()">&times;</span>
            <img id="modalImage" class="rounded-lg shadow-lg" src="" alt="Modal Image" />
        </div>
    </div>
</div>

<!-- Tailwind CSS styles for dark mode and retro theme -->
<style>
    body {
        background-color: #f4f4e6;
        color: #333;
    }
    .dark body {
        background-color: #1a202c;
        color: #e2e8f0;
    }
</style>

Responsive Image Lightbox-Komponente mit dunklem Design

Vorschau öffnen

                <div id="imageModal" class="fixed inset-0 z-50 hidden overflow-y-auto lg:flex lg:items-center lg:justify-center bg-black bg-opacity-90">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-3xl mx-auto">
    <div class="flex justify-between items-center border-b border-gray-200 dark:border-gray-700 px-4 py-3">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Image Title</h3>
      <button onclick="closeModal()" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none">
        <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="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
    <div class="p-4">
      <img src="https://picsum.photos/800/600" alt="Image" class="w-full h-auto rounded-lg">
    </div>
  </div>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
  <!-- Image cards to trigger the lightbox -->
  <div class="relative rounded-lg overflow-hidden shadow-md">
    <img src="https://picsum.photos/400/300" alt="Image" class="w-full h-48 object-cover cursor-pointer" onclick="openModal()">
    <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity cursor-pointer" onclick="openModal()">
      <p class="text-white text-lg font-semibold">View Image</p>
    </div>
  </div>
    <div class="relative rounded-lg overflow-hidden shadow-md">
    <img src="https://picsum.photos/400/301" alt="Image" class="w-full h-48 object-cover cursor-pointer" onclick="openModal()">
    <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity cursor-pointer" onclick="openModal()">
      <p class="text-white text-lg font-semibold">View Image</p>
    </div>
  </div>
      <div class="relative rounded-lg overflow-hidden shadow-md">
    <img src="https://picsum.photos/400/302" alt="Image" class="w-full h-48 object-cover cursor-pointer" onclick="openModal()">
    <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity cursor-pointer" onclick="openModal()">
      <p class="text-white text-lg font-semibold">View Image</p>
    </div>
  </div>
      <div class="relative rounded-lg overflow-hidden shadow-md">
    <img src="https://picsum.photos/400/303" alt="Image" class="w-full h-48 object-cover cursor-pointer" onclick="openModal()">
    <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity cursor-pointer" onclick="openModal()">
      <p class="text-white text-lg font-semibold">View Image</p>
    </div>
  </div>
  
</div>

<script>
function openModal() {
  document.getElementById('imageModal').classList.remove('hidden');
}

function closeModal() {
  document.getElementById('imageModal').classList.add('hidden');
}
</script>

Bild-Lightbox-Komponente

Image Lightbox Komponente mit Retro / Vintage-Design, analoges Farbschema, einfache Komplexität, für Geschäfts- / Unternehmenszwecke. Reaktionsschnell mit Unterstützung für dunkle Themen. HTML nur mit Tailwind CSS.

Vorschau öffnen

                <div class="container mx-auto px-4 py-8 dark:bg-gray-800">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
    <!-- Image 1 -->
    <div class="group relative">
      <img src="https://picsum.photos/600/400?random=1" alt="Gallery Image 1" class="w-full h-48 object-cover rounded-lg shadow-md transition-transform transform 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">
        <p class="text-white text-lg font-bold">View Image</p>
      </div>
    </div>

    <!-- Image 2 -->
    <div class="group relative">
      <img src="https://picsum.photos/600/400?random=2" alt="Gallery Image 2" class="w-full h-48 object-cover rounded-lg shadow-md transition-transform transform 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">
        <p class="text-white text-lg font-bold">View Image</p>
      </div>
    </div>

    <!-- Image 3 -->
    <div class="group relative">
      <img src="https://picsum.photos/600/400?random=3" alt="Gallery Image 3" class="w-full h-48 object-cover rounded-lg shadow-md transition-transform transform 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">
        <p class="text-white text-lg font-bold">View Image</p>
      </div>
    </div>
    
    <!-- Add more images as needed -->

  </div>
</div>

Bild-Lightbox-Komponente

Eine responsive Bild-Lightbox-Komponente, die für den E-Commerce mit einem minimalistischen Flat-Design-Stil entwickelt wurde und helle und dunkle Themen mit Tailwind CSS unterstützt.

Vorschau öffnen

                <div class="relative inline-block cursor-pointer group">
    <img src="https://picsum.photos/600/400" alt="Lightbox" class="w-full h-auto rounded-lg shadow-sm transition duration-300 ease-in-out transform group-hover:scale-105">
    <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100 rounded-lg"></div>
    <div class="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100">
        <span class="text-white text-2xl font-semibold">View Image</span>
    </div>
</div>

<!-- Lightbox Modal -->
<div id="lightbox-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-80 hidden">
    <div class="relative w-full max-w-3xl">
        <img src="https://picsum.photos/1200/800" alt="Lightbox Image" class="w-full h-auto rounded-lg shadow-lg">
        <button class="absolute top-4 right-4 text-white bg-red-500 hover:bg-red-600 rounded-full p-2 transition duration-300 ease-in-out">✖</button>
    </div>
</div>

<style>
    /* Dark Mode Support */
    .dark .bg-gray-900 { background-color: #1b1b1b; }
    .dark .bg-black { background-color: #000; }
</style>

Bild-Lightbox-Komponente

Eine Image-Lightbox-Komponente im brutalistischen Stil, die sich für einen Blog oder eine Content-Plattform eignet und mit Erdtönen und komplexen interaktiven Elementen gestaltet ist.

Vorschau öffnen

                <div class="relative flex flex-col items-center justify-center p-4 w-full max-w-screen-lg mx-auto bg-white dark:bg-gray-800 border-2 border-gray-700 dark:border-gray-300 rounded-lg overflow-hidden shadow-lg">
    <h2 class="text-3xl font-bold mb-4 text-gray-800 dark:text-gray-200">Image Lightbox</h2>
    <div class="flex flex-wrap justify-center gap-4">
        <!-- Image Thumbnails -->
        <div class="w-1/3 p-2">
            <img src="https://picsum.photos/300/200?random=1" alt="Example Image 1" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300" onclick="openLightbox('https://picsum.photos/600/400?random=1')">
        </div>
        <div class="w-1/3 p-2">
            <img src="https://picsum.photos/300/200?random=2" alt="Example Image 2" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300" onclick="openLightbox('https://picsum.photos/600/400?random=2')">
        </div>
        <div class="w-1/3 p-2">
            <img src="https://picsum.photos/300/200?random=3" alt="Example Image 3" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300" onclick="openLightbox('https://picsum.photos/600/400?random=3')">
        </div>
    </div>
    <!-- Lightbox Overlay -->
    <div id="lightbox" class="hidden fixed inset-0 z-50 bg-black bg-opacity-75 flex items-center justify-center transition-opacity duration-300">
        <span class="absolute top-4 right-4 text-white cursor-pointer" onclick="closeLightbox()">&times;</span>
        <img id="lightbox-img" class="max-w-full max-h-full object-contain" src="" alt="Lightbox Image">
    </div>
</div>

<script>
function openLightbox(imageUrl) {
    const lightbox = document.getElementById('lightbox');
    const lightboxImg = document.getElementById('lightbox-img');
    lightboxImg.src = imageUrl;
    lightbox.classList.remove('hidden');
}

function closeLightbox() {
    const lightbox = document.getElementById('lightbox');
    lightbox.classList.add('hidden');
}
</script>

Kategorien

Bild-Lightbox