Gallery

JavaScript based lightbox component for presenting various types of media.

Finder component

Gallery component relies on 3rd party plugin. Make sure to link to Light Gallery css and js files in your document: import Lightgallery from 'lightgallery/vue'; and import 'lightgallery/scss/lightgallery.scss';. If you need extra features like zooming, fullscreen view or video you need to include additional plugins:

import lgThumbnail from 'lightgallery/plugins/thumbnail'
import lgZoom from 'lightgallery/plugins/zoom'

<!-- Image gallery -->
<div class="gallery">
<lightgallery :settings="{ speed: 500, plugins: pluginsData }">
<a class="gallery-item rounded-2" src="../../../src/assets/img/real-estate/single/08.jpg">
  <img alt="Gallery image caption #6" src="@/assets/img/real-estate/single/th08.jpg" />
</a>
</lightgallery>
</div

Grid with gutters

Result
Vue

<!-- Gallery grid with gutters -->
<div class="row g-4 gallery" data-video="true">

<!-- Item -->
<div class="col-xl-4 col-sm-6">
<lightgallery :settings="{ speed: 500, plugins: pluginsData }">
<a class="gallery-item rounded-2" src="../../../src/assets/img/real-estate/single/08.jpg">
  <img alt="Gallery image caption #6" src="@/assets/img/real-estate/single/th08.jpg" />
</a>
</lightgallery>
</div>

<!-- Item -->
<div class="col-xl-4 col-sm-6">
....
</div>

<!-- Add as many columns with gallery item inside as you need -->
</div

Grid no gutters

Result
Vue

<!-- Gallery grid no gutters -->
<div class="row gallery g-0" data-video="true">

<!-- Item -->
<div class="col-xl-4 col-sm-6 border border-light">
<a href="path-to-large-image" class="gallery-item" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
  <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
  <span class="gallery-item-caption">Gallery image caption</span>
</a>
</div>

<!-- Item -->
<div class="col-xl-4 col-sm-6 border border-light">
....
</div>

<!-- Add as many columns with gallery item inside as you need -->
</div

Inside card

Result
Vue

Card with gallery thumbnail

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

<!-- Gallery inside card -->
<div class="card gallery">
<lightgallery :settings="{ speed: 500, plugins: pluginsData }">
<a class="gallery-item rounded-2" src="../../../src/assets/img/real-estate/single/08.jpg">
  <img alt="Gallery image caption #6" src="@/assets/img/real-estate/single/th08.jpg" />
</a>
</lightgallery>
<div class="card-body">
<h5 class="card-title">Card with gallery thumbnail</h5>
<p class="card-text fs-sm text-muted">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
</div>
</div

Thumbnails

Result
Vue

+5 photos

<!-- Gallery with thumbnails  -->
<div class="row g-2 g-md-3 gallery" data-thumbnails="true">
<div class="col-sm-8">
<lightgallery :settings="{ speed: 500, plugins: pluginsData }">
<a class="gallery-item rounded-2" src="../../../src/assets/img/real-estate/single/08.jpg">
  <img alt="Gallery image caption #6" src="@/assets/img/real-estate/single/th08.jpg" />
</a>
</lightgallery>
</div>
<div class="col-sm-4">
<lightgallery :settings="{ speed: 500, plugins: pluginsData }">
<a class="gallery-item rounded-2" src="../../../src/assets/img/real-estate/single/08.jpg">
  <img alt="Gallery image caption #6" src="@/assets/img/real-estate/single/th08.jpg" />
</a>
</lightgallery>
<lightgallery :settings="{ speed: 500, plugins: pluginsData }">
<a class="gallery-item rounded-2" src="../../../src/assets/img/real-estate/single/08.jpg">
  <img alt="Gallery image caption #6" src="@/assets/img/real-estate/single/th08.jpg" />
</a>
</lightgallery>
</div>
<div class="col-12">
<div class="row g-2 g-md-3">
  <div class="col-sm">
  <lightgallery :settings="{ speed: 500, plugins: pluginsData }">
  <a class="gallery-item rounded-2" src="../../../src/assets/img/real-estate/single/08.jpg">
    <img alt="Gallery image caption #6" src="@/assets/img/real-estate/single/th08.jpg" />
  </a>
  </lightgallery>
  </div>
  <div class="col-sm">
  <lightgallery :settings="{ speed: 500, plugins: pluginsData }">
  <a class="gallery-item rounded-2" src="../../../src/assets/img/real-estate/single/08.jpg">
    <img alt="Gallery image caption #6" src="@/assets/img/real-estate/single/th08.jpg" />
  </a>
  </lightgallery>
  </div>
  <div class="col-sm">
  <lightgallery :settings="{ speed: 500, plugins: pluginsData }">
  <a class="gallery-item rounded-2" src="../../../src/assets/img/real-estate/single/08.jpg">
    <img alt="Gallery image caption #6" src="@/assets/img/real-estate/single/th08.jpg" />
  </a>
  </lightgallery>
  </div>
  <div class="col-sm">
  <lightgallery :settings="{ speed: 500, plugins: pluginsData }">
  <a class="gallery-item rounded-2" src="../../../src/assets/img/real-estate/single/08.jpg">
    <img alt="Gallery image caption #6" src="@/assets/img/real-estate/single/th08.jpg" />
  </a>
  </lightgallery>
  </div>
  <div class="col-sm">
  <lightgallery :settings="{ speed: 500, plugins: pluginsData }">
  <a class="gallery-item rounded-2" src="../../../src/assets/img/real-estate/single/08.jpg">
    <img alt="Gallery image caption #6" src="@/assets/img/real-estate/single/th08.jpg" />
  </a>
  </lightgallery>
  </div>
</div>
</div>
</div

Content

Components