Composants Boîte lumineuse d’image Composant Lightbox d’image

Composant Lightbox d’image

Un composant de lightbox d’image réactive avec un design aquarelle/artistique, des couleurs sourdes et une prise en charge du mode sombre, adapté aux plates-formes éducatives.

Aperçu

HTML Code

<div class="font-sans bg-amber-50 dark:bg-gray-900 text-stone-800 dark:text-stone-200 p-4 sm:p-8 md:p-12 min-h-screen flex items-center justify-center">

  <!-- Grid of Images (simulating a gallery) -->
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 max-w-7xl mx-auto" x-data="{ openLightbox: false, currentImage: '' }">

    <!-- Image 1 -->
    <div class="relative group cursor-pointer overflow-hidden rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:scale-105" @click="openLightbox = true; currentImage = 'https://picsum.photos/id/1018/800/600'">
      <img src="https://picsum.photos/id/1018/400/300" alt="Artistic Image" class="w-full h-48 object-cover rounded-lg transform group-hover:scale-110 transition-transform duration-300" />
      <div class="absolute inset-0 bg-gradient-to-t from-stone-900/60 to-transparent rounded-lg flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        <p class="text-xs text-white">Concept Drawing: 'Ancient Knowledge'</p>
      </div>
      <span class="absolute top-2 right-2 text-white bg-black/50 px-2 py-1 rounded-full text-xs">View</span>
    </div>

    <!-- Image 2 -->
    <div class="relative group cursor-pointer overflow-hidden rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:scale-105" @click="openLightbox = true; currentImage = 'https://picsum.photos/id/1041/800/600'">
      <img src="https://picsum.photos/id/1041/400/300" alt="Historical Document" class="w-full h-48 object-cover rounded-lg transform group-hover:scale-110 transition-transform duration-300" />
      <div class="absolute inset-0 bg-gradient-to-t from-stone-900/60 to-transparent rounded-lg flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        <p class="text-xs text-white">Scholarly Text: 'Illuminated Manuscripts'</p>
      </div>
      <span class="absolute top-2 right-2 text-white bg-black/50 px-2 py-1 rounded-full text-xs">View</span>
    </div>

    <!-- Image 3 -->
    <div class="relative group cursor-pointer overflow-hidden rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:scale-105" @click="openLightbox = true; currentImage = 'https://picsum.photos/id/1069/800/600'">
      <img src="https://picsum.photos/id/1069/400/300" alt="Natural Science" class="w-full h-48 object-cover rounded-lg transform group-hover:scale-110 transition-transform duration-300" />
      <div class="absolute inset-0 bg-gradient-to-t from-stone-900/60 to-transparent rounded-lg flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        <p class="text-xs text-white">Botanical Study: 'Flora & Fauna'</p>
      </div>
      <span class="absolute top-2 right-2 text-white bg-black/50 px-2 py-1 rounded-full text-xs">View</span>
    </div>

    <!-- Image 4 -->
    <div class="relative group cursor-pointer overflow-hidden rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:scale-105" @click="openLightbox = true; currentImage = 'https://picsum.photos/id/1070/800/600'">
      <img src="https://picsum.photos/id/1070/400/300" alt="Architectural Blueprint" class="w-full h-48 object-cover rounded-lg transform group-hover:scale-110 transition-transform duration-300" />
      <div class="absolute inset-0 bg-gradient-to-t from-stone-900/60 to-transparent rounded-lg flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        <p class="text-xs text-white">Historic Architecture: 'The Grand Library'</p>
      </div>
      <span class="absolute top-2 right-2 text-white bg-black/50 px-2 py-1 rounded-full text-xs">View</span>
    </div>

    <!-- Lightbox Overlay (requires Alpine.js for interactivity) -->
    <template x-if="openLightbox">
      <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm" @click.self="openLightbox = false" @keydown.escape.window="openLightbox = false">
        <div class="relative max-w-4xl max-h-full bg-cover bg-center rounded-xl p-2 md:p-4 perspective transform rotate-x-0 dark:bg-stone-800 transition-all duration-500 ease-out"
             :class="{ 'scale-95 opacity-0': !openLightbox, 'scale-100 opacity-100': openLightbox }"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 scale-90"
             x-transition:enter-end="opacity-100 scale-100"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100 scale-100"
             x-transition:leave-end="opacity-0 scale-90"
             style="background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZzBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiM2QjZDQUEiIGZpbGwtb3BhY2l0eT0iMC4xIj48cGF0aCBkPSJNNiAwTDYgMiAyIDIgMiAwIDYgMFY2NUgyNVY2MEg2MFYwSDZ6TTMwIDMwTDMwIDMyIDMyIDMyIDMyIDMwIDMwIDMwek0wIDMwbDMwIDBMNTQgMGwyNCAwLDAtMjQsLTMwIDAtOTAgMCwtMTggMjQsMCwyNC0wIDQ4LTQ4IDAsOTYgOTYtOTYgOTYtNDggNDgtOTYgOTYtOTYgOTYtOTYtOTYgOTYtOTYtNDgtNDggOTYgOTYtOTYtOTYtOTYtOTYtOTYtOTYtNDggNDggOTYgOTYtOTYtOTYtOTYtOTYtOTYtOTYtNDggNDh6TTAgMDBMMjQgMCwyNCAyNCwwIDI0ek0wIDYwTDYwIDYwLDYwIDI0LDMwIDI0LDMwIDU0LDAgNTR6TTAgOTBMNDggOTYsNDggOTAsNTQgOTAsNjAgNjAsNjAgMjQsMjQgMjQsMjQgNDgsNDggNDgsNDggOTYsMjQgOTYsMjQgNjAsNjAgNjAsNjAgOTYsOTYgOTYsOTYgNjAsMjQgNjAsMjQgOTYsOTYgOTYsOTYgNjAsMjQgNjAsMjQsMjQgMjQsMjQgNjAsNjAgNjAsNjAgMjQlMjQsMjQgNjAsNjAgNjAsMjQlMjQsMjQgNjAsNjAgNjAgMjRQMjQgOTZMMCA5NnpNMDQ4TDMwIDQ4LDMwIDUwLDQ4IDUwLDQ4IDQ4ek0wIDI0TDMwIDI0LDMwIDI2LDQ4IDI2LDQ4IDI0ek0yNCAyNEw2IDI0LDYgMjYsMjQgMjZ6TTI0IDBMMjQgMiw2IDIsNiAwek0yNCA0OEw2IDQ4LDYgNTAsMjQgNTB6TTYgNjBsMiAwLDAtMmwtMiAwVjYwem0zMC0yNGwyIDAsMC0ybC0yIDBWMzZ6TTAgNjBsMiAwLDAtMmwtMiAwVjYwem00OC0yNGwyIDAsMC0ybC0yIDBWMzZ6TTYgNjBsMjQwLDAtMmwtMjQwIDBWMzZ6TTYgNjBsMjAwLDAsMC0ybC0yMDAgMFYwdi0yNHptMjg4IDAxMjAgMTIwLzE4IDBMMjQwIDI4OGwwLTEyMHptNzIgNzJsOTYgOTYtOTYgOTZtMDAtMTkybDc2LTM2TDI0IDM2ek00OCAwTDI0IDBMMjQgMTgsNDggMTh6TTI0IDQ4TDE4IDQ4LDE4IDU0LDI0IDU0eiIvPjwvZz48L2c+PC9zdmc+'")">
          <img :src="currentImage" alt="Lightbox Image" class="max-w-full max-h-[80vh] object-contain mx-auto my-auto rounded-lg shadow-xl border-4 border-stone-200 dark:border-stone-700 watercolor-border" />

          <!-- Close Button -->
          <button class="absolute top-2 right-2 p-2 rounded-full bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-stone-400 dark:hover:bg-stone-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 dark:focus:ring-offset-stone-900" @click="openLightbox = false">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
            <span class="sr-only">Close Lightbox</span>
          </button>
        </div>
      </div>
    </template>

  </div>

  <!-- Alpine.js script (for basic interactivity, not part of static HTML) -->
  <script>
    // This script is for demonstration purposes for the interactivity.
    // In a real project, Alpine.js would be loaded externally.
    document.addEventListener('alpine:init', () => {
      Alpine.data('lightbox', () => ({
        openLightbox: false,
        currentImage: ''
      }))
    })
  </script>
  <script src="https://unpkg.com/alpinejs" defer></script>

  <!-- Custom CSS for watercolor effect (conceptual, would likely be via `tailwind.config.js` or a separate file) -->
  <style>
    /* Basic watercolor border effect - conceptual, for a true effect, complex SVGs or multiple layered borders would be needed */
    .watercolor-border {
      border: 4px solid transparent;
      border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%23a8a29e"/><stop offset="25%" stop-color="%23d6d3d1"/><stop offset="50%" stop-color="%23a8a29e"/><stop offset="75%" stop-color="%23d6d3d1"/><stop offset="100%" stop-color="%23a8a29e"/></linearGradient></defs><rect x="0" y="0" width="100" height="100" fill="url(%23g)" opacity="0.5"/><circle cx="20" cy="20" r="15" fill="%23a8a29e" opacity="0.6"/><circle cx="80" cy="80" r="10" fill="%23d6d3d1" opacity="0.6"/><path d="M0,0 L100,0 L100,100 L0,100 Z" fill="none" stroke="%23b4b4b4" stroke-width="5" stroke-dasharray="5 3" opacity="0.3"/></svg>') 30 round;
      border-image-slice: 1;
    }
    .dark .watercolor-border {
      border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%2344403c"/><stop offset="25%" stop-color="%2357534e"/><stop offset="50%" stop-color="%2344403c"/><stop offset="75%" stop-color="%2357534e"/><stop offset="100%" stop-color="%2344403c"/></linearGradient></defs><rect x="0" y="0" width="100" height="100" fill="url(%23g)" opacity="0.5"/><circle cx="20" cy="20" r="15" fill="%2344403c" opacity="0.6"/><circle cx="80" cy="80" r="10" fill="%2357534e" opacity="0.6"/><path d="M0,0 L100,0 L100,100 L0,100 Z" fill="none" stroke="%236d6d6d" stroke-width="5" stroke-dasharray="5 3" opacity="0.3"/></svg>') 30 round;
    }
  </style>
</div>

Composants associés

Composant Lightbox d’image

Un composant de lightbox d’image réactive conçu dans un style brutaliste avec des tons de terre. Il dispose d’une prise en charge du mode sombre pour la visualisation du tableau de bord.

Ouvrir

Composant Lightbox d’image

Un composant lightbox d’image rétro/vintage avec des couleurs vives, un design réactif et une prise en charge du thème sombre, adapté aux portefeuilles.

Ouvrir

Composant Lightbox d’image

Un composant de lightbox d’image réactive conçu en mode sombre à l’aide de Tailwind CSS. Il présente un arrière-plan sombre, des effets d’opacité et des conceptions réactives pour s’adapter à différentes tailles d’écran.

Ouvrir