Gallery Components

Showcase images with grid, lightbox, and carousel layouts. Supports categories and filtering.

Variant: grid

Responsive grid layout without lightbox. Simple image display in 2-4 column layouts.

Grid Gallery

Simple responsive image grid

Chrome Plating

Gold Plating

Nickel Plating

Restoration

{
  "component": "gallery",
  "variant": "grid",
  "data": {
    "heading": "Grid Gallery",
    "subheading": "Simple responsive image grid",
    "columns": 4,
    "images": [
      {
        "src": "/assets/img/project1.jpg",
        "alt": "Chrome plated fixtures",
        "caption": "Chrome Plating"
      },
      {
        "src": "/assets/img/project2.jpg",
        "alt": "Gold plated items",
        "caption": "Gold Plating"
      }
    ],
    "bg": "white"
  }
}

<section class="gallery-component bg-white py-5">
  <div class="container">
    <h2 class="text-center mb-3">Grid Gallery</h2>
    <p class="text-center text-muted mb-4">Simple responsive image grid</p>
    <div class="row g-3">
      <div class="col-md-3">
        <img src="/assets/img/project1.jpg" class="img-fluid rounded" alt="Chrome plated fixtures">
        <p class="text-center mt-2 small text-muted">Chrome Plating</p>
      </div>
      <!-- More images -->
    </div>
  </div>
</section>

Variant: lightbox

Grid with click-to-enlarge using GLightbox. The most interactive option for showcasing detailed work.

Lightbox Gallery

Click images to view full size

Luxury hotel restoration

Architectural project

Retail installation

{
  "component": "gallery",
  "variant": "lightbox",
  "data": {
    "heading": "Lightbox Gallery",
    "subheading": "Click images to view full size",
    "columns": 3,
    "images": [
      {
        "src": "/assets/img/project1.jpg",
        "thumb": "/assets/img/project1-thumb.jpg",
        "alt": "Hotel bathroom fixtures",
        "caption": "Luxury hotel restoration",
        "category": "hotels"
      },
      {
        "src": "/assets/img/project2.jpg",
        "thumb": "/assets/img/project2-thumb.jpg",
        "alt": "Architectural metalwork",
        "caption": "Architectural project",
        "category": "architecture"
      }
    ],
    "bg": "light"
  }
}

<section class="gallery-component bg-light py-5">
  <div class="container">
    <h2 class="text-center mb-3">Lightbox Gallery</h2>
    <div class="row g-3">
      <div class="col-md-4">
        <a href="/assets/img/project1.jpg" class="glightbox" data-gallery="gallery1">
          <img src="/assets/img/project1-thumb.jpg" class="img-fluid rounded" alt="Hotel fixtures">
        </a>
      </div>
      <!-- More images -->
    </div>
  </div>
  <!-- Requires GLightbox library -->
</section>

Variant: carousel

Image slider with thumbnail navigation. Great for showcasing projects in sequence with controls.

Carousel Gallery

Navigate through images with arrows or thumbnails

{
  "component": "gallery",
  "variant": "carousel",
  "data": {
    "heading": "Carousel Gallery",
    "subheading": "Navigate through images",
    "images": [
      {
        "src": "/assets/img/project1.jpg",
        "alt": "Project 1",
        "caption": "Chrome plating for luxury hotel"
      },
      {
        "src": "/assets/img/project2.jpg",
        "alt": "Project 2",
        "caption": "Gold finish for retail display"
      }
    ],
    "bg": "white"
  }
}

<section class="gallery-component bg-white py-5">
  <div class="container">
    <h2 class="text-center mb-3">Carousel Gallery</h2>
    <div class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="/assets/img/project1.jpg" class="d-block w-100" alt="Project 1">
        </div>
        <!-- More slides -->
      </div>
      <button class="carousel-control-prev" type="button">
        <span class="carousel-control-prev-icon"></span>
      </button>
      <button class="carousel-control-next" type="button">
        <span class="carousel-control-next-icon"></span>
      </button>
    </div>
    <!-- Thumbnail navigation -->
  </div>
</section>

Configuration Options

Common Options:

columns - Number of columns (2-4) for grid and lightbox variants
showFilter - Enable category filtering (requires category on images)
bg - Background color (white, light, dark)

Image Properties:

src - Full-size image URL
thumb - Thumbnail URL (optional, uses src if not provided)
alt - Alt text for accessibility
caption - Display caption below image
category - Category for filtering

The lightbox variant requires GLightbox library (included in vendor assets).