Image Gallery

This component displays a beautiful gallery of images in a grid format. Users can open the images, swipe, zoom, and navigate through the gallery.

You can specify:

• a gallery title
• a date
• a list of images, either by file path or folder

Users can specify a gallery title, date, and a list of images, either by file path or folder.

See below for a demo, else you can jump to:

• Setup
• Usage

Demo

Option 1: Specify a list of folders

Sample Images of Vancouver area taken from UnsplashJanuary 9, 2025

View the code

<ImageGallery
      title="Sample Images of Vancouver area taken from Unsplash"
      date="2025-01-09"
      :folders="[
        'demo-day', 'demo-evening', 'demo-night'
      ]"
    />

Option 2: Specify a list of images by file path

A few of the same images from the previous galleryJanuary 9, 2025

View the code

<ImageGallery
      title="Sample Images of Vancouver area taken from Unsplash"
      date="2025-01-09"
      :images="[
        '/gallery/demo-day/tribalet-boat-on-water-near-cliff.jpg',
        '/gallery/demo-night/spravko-a-city-at-night-with-cars-parked.jpg',
        '/gallery/demo-night/spravko-a-city-skyline-at-night-with-a-boat.jpg'
      ]"
    />

Option 3: Mix and match folders and file paths

Another set of those imagesJanuary 9, 2025

View the code

<ImageGallery
      title="Sample Images of Vancouver area taken from Unsplash"
      date="2025-01-09"
      :images="[
        '/gallery/demo-day/tribalet-boat-on-water-near-cliff.jpg',
        '/gallery/demo-evening/khouly-into-the-night.jpg',
      ]"
      :folders="[
        'demo-night'
      ]"
    />

You can also add a link to the header bar

Demonstrating a link in the header barJanuary 9, 2025

View the code

<ImageGallery
      title="Demonstrating a link in the header bar"
      date="2025-01-09"
      link="https://example.com"
      :images="[
        '/gallery/demo-day/tribalet-boat-on-water-near-cliff.jpg',
      ]"
      :folders="[
        'demo-night'
      ]"
    />

Image Credits

• calm body of water near forest by Jeremy Allouche on Unsplash
• boat on water near cliff by Luc Tribalet on Unsplash
• A City with Tall Buildings by Brett Wharton on Unsplash
• Downtown VanCity by Aditya Chinchure on Unsplash
• Into the Night by Mado El Khouly on Unsplash
• A City at Night with Cars Parked by Dmitry Spravko on Unsplash
• A City Skyline at Night with a Boat by Dmitry Spravko on Unsplash

Usage