Image Preview Modal

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

<!-- Image Preview Modal -->
<div id="image-modal" class="fixed inset-0 z-50 hidden">
  <!-- Backdrop -->
  <div class="fixed inset-0 bg-black/95" onclick="closeModal('image-modal')"></div>
  
  <!-- Modal Content -->
  <div class="fixed inset-0 flex items-center justify-center p-4">
    <!-- Close Button -->
    <button onclick="closeModal('image-modal')" class="absolute top-4 right-4 z-10 p-3 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors backdrop-blur">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
      </svg>
    </button>
    
    <!-- Navigation -->
    <button class="absolute left-4 top-1/2 -translate-y-1/2 z-10 p-3 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors backdrop-blur">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
      </svg>
    </button>
    <button class="absolute right-4 top-1/2 -translate-y-1/2 z-10 p-3 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors backdrop-blur">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
      </svg>
    </button>
    
    <!-- Image Container -->
    <div class="relative max-w-5xl max-h-[85vh]">
      <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200&h=800&fit=crop" alt="Mountain landscape at sunset" class="max-w-full max-h-[85vh] object-contain rounded-lg shadow-2xl">
      
      <!-- Caption -->
      <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent rounded-b-lg">
        <h3 class="text-white font-medium">Mountain Sunset</h3>
        <p class="text-white/70 text-sm">Alpine meadows, Switzerland • August 2024</p>
      </div>
    </div>
    
    <!-- Toolbar -->
    <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex items-center gap-2 p-2 bg-white/10 backdrop-blur-md rounded-full">
      <button class="p-2 hover:bg-white/20 rounded-full text-white transition-colors">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
        </svg>
      </button>
      <button class="p-2 hover:bg-white/20 rounded-full text-white transition-colors">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
        </svg>
      </button>
      <button class="p-2 hover:bg-white/20 rounded-full text-white transition-colors">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"/>
        </svg>
      </button>
      <button class="p-2 hover:bg-white/20 rounded-full text-white transition-colors">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
        </svg>
      </button>
    </div>
    
    <!-- Thumbnail Strip -->
    <div class="absolute bottom-20 left-1/2 -translate-x-1/2 flex gap-2">
      <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=100&h=70&fit=crop" class="w-16 h-12 object-cover rounded border-2 border-white cursor-pointer opacity-60 hover:opacity-100 transition-opacity">
      <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=100&h=70&fit=crop" class="w-16 h-12 object-cover rounded border-2 border-white cursor-pointer opacity-60 hover:opacity-100 transition-opacity">
      <img src="https://images.unsplash.com/photo-1486870591958-9b9d0d1dda99?w=100&h=70&fit=crop" class="w-16 h-12 object-cover rounded border-2 border-white cursor-pointer opacity-60 hover:opacity-100 transition-opacity">
      <img src="https://images.unsplash.com/photo-1454496522488-7a8e488e8606?w=100&h=70&fit=crop" class="w-16 h-12 object-cover rounded border-2 border-white cursor-pointer opacity-60 hover:opacity-100 transition-opacity">
    </div>
    
    <!-- Image Counter -->
    <div class="absolute top-4 left-4 px-3 py-1.5 bg-white/10 backdrop-blur-md rounded-full text-white text-sm">
      1 / 4
    </div>
  </div>
</div>

<!-- Demo Trigger Button -->
<button onclick="openModal('image-modal')" class="px-6 py-3 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 font-medium rounded-xl hover:bg-gray-800 dark:hover:bg-gray-200 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">Open Image Preview</button>

1
2
3
4
5
6
7
8
9
10
11
12

# Image Preview Modal

Image preview lightbox modal.

## Usage
```bash
npx devsnips add Tailwind/Components/Modals/image-preview-modal
```
Copy from `code.html`.

## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md`