Image Lightbox

<div class="sui-lightbox-thumb" style="width:200px;height:140px;">
  <img src="path/to/image.jpg" alt="Description">
</div>

<!-- Click the thumbnail to open the lightbox -->
<!-- Press Escape to close, click image to zoom -->

<!-- Wrap thumbnails in sui-lightbox-grid for gallery mode -->
<div class="sui-lightbox-grid">
  <div class="sui-lightbox-thumb">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="sui-lightbox-thumb">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <div class="sui-lightbox-thumb">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <!-- Lightbox auto-detects siblings for prev/next navigation -->
  <!-- Arrow keys: Left/Right to navigate, Escape to close -->
</div>

<!-- Horizontal scrolling filmstrip -->
<div class="sui-lightbox-filmstrip">
  <div class="sui-lightbox-thumb">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="sui-lightbox-thumb">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <div class="sui-lightbox-thumb">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <!-- Scrolls horizontally when thumbnails overflow -->
</div>

<!-- Amazon-style vertical gallery -->
<div class="sui-lightbox-vertical" style="height:280px;">
  <div class="sui-lightbox-vertical-strip">
    <div class="sui-lightbox-thumb active">
      <img src="image1.jpg" alt="Image 1">
    </div>
    <div class="sui-lightbox-thumb">
      <img src="image2.jpg" alt="Image 2">
    </div>
    <div class="sui-lightbox-thumb">
      <img src="image3.jpg" alt="Image 3">
    </div>
    <div class="sui-lightbox-thumb">
      <img src="image4.jpg" alt="Image 4">
    </div>
  </div>
  <div class="sui-lightbox-vertical-main">
    <img src="image1.jpg" alt="Main image">
  </div>
</div>
<!-- Click side thumbnails to swap main image -->
<!-- Click main image to open lightbox with gallery nav -->

<div class="sui-lightbox-grid">
  <div class="sui-lightbox-thumb" data-caption="Sunset over the mountains">
    <img src="sunset.jpg" alt="Sunset">
  </div>
  <div class="sui-lightbox-thumb" data-caption="Lush forest canopy">
    <img src="forest.jpg" alt="Forest">
  </div>
  <div class="sui-lightbox-thumb" data-caption="Ocean waves at golden hour">
    <img src="ocean.jpg" alt="Ocean">
  </div>
</div>

<div class="sui-lightbox-grid sui-lightbox-inset">
  <div class="sui-lightbox-thumb">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="sui-lightbox-thumb">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <div class="sui-lightbox-thumb">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <div class="sui-lightbox-thumb">
    <img src="image4.jpg" alt="Image 4">
  </div>
</div>