Gallery (Lightbox)

JavaScript based lightbox component for presenting various types of media.

Around component

Gallery component relies on 3rd party plugin. Make sure to link to Light Gallery css and js files in your document: assets/vendor/lightgallery/css/lightgallery-bundle.min.css and assets/vendor/lightgallery/lightgallery.min.js. If you need extra features like zooming, fullscreen view or video you need to include additional plugins:

assets/vendor/lightgallery/plugins/fullscreen/lg-fullscreen.min.js
assets/vendor/lightgallery/plugins/zoom/lg-zoom.min.js
assets/vendor/lightgallery/plugins/video/lg-video.min.js
assets/vendor/lightgallery/plugins/thumbnail/lg-thumbnail.min.js

Use this page as a reference.

Media: Image

Image caption

<!-- Image gallery -->
<div class="gallery">
  <a href="assets/img/portfolio/single/v1/04.jpg" class="gallery-item d-block card-hover">
    <div class="d-flex justify-content-center align-items-center position-absolute top-0 start-0 w-100 h-100 rounded-4 overflow-hidden zindex-2 opacity-0">
      <i class="ai-zoom-in fs-2 text-white position-relative zindex-2"></i>
      <div class="position-absolute bottom-0 start-0 w-100 text-center text-white fs-sm fw-medium zindex-2 pb-3">
        Image caption
      </div>
      <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-40"></div>
    </div>
    <img src="assets/img/portfolio/single/v1/04.jpg" class="d-block rounded-4" alt="Image caption">
  </a>
</div>

// Image gallery
.gallery
  a(href="assets/img/portfolio/single/v1/04.jpg").gallery-item.d-block.card-hover
    .d-flex.justify-content-center.align-items-center.position-absolute.top-0.start-0.w-100.h-100.rounded-4.overflow-hidden.zindex-2.opacity-0
      i.ai-zoom-in.fs-2.text-white.position-relative.zindex-2
      .position-absolute.bottom-0.start-0.w-100.text-center.text-white.fs-sm.fw-medium.zindex-2.pb-3
        | Image caption
      .position-absolute.top-0.start-0.w-100.h-100.bg-dark.opacity-40
    img(src="assets/img/portfolio/single/v1/04.jpg", alt="Image caption").d-block.rounded-4

Media: Video

Video caption

<!-- Video gallery -->
<div class="gallery" data-video="true">
  <a href="https://www.youtube.com/watch?v=udMULpKcnn8" class="gallery-item d-block card-hover">
    <div class="btn btn-icon btn-lg btn-primary rounded-circle pe-none position-absolute top-50 start-50 translate-middle zindex-3">
      <i class="ai-play-filled"></i>
    </div>
    <div class="d-flex justify-content-center align-items-center position-absolute top-0 start-0 w-100 h-100 rounded-4 overflow-hidden zindex-2 opacity-0">
      <div class="position-absolute bottom-0 start-0 w-100 text-center text-white fs-sm fw-medium zindex-2 pb-3">
        Video caption
      </div>
      <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-40"></div>
    </div>
    <img src="assets/img/landing/product/video-cover.jpg" class="d-block rounded-4" alt="Video caption">
  </a>
</div>

// Video gallery
.gallery(data-video="true")
  a(href="https://www.youtube.com/watch?v=udMULpKcnn8").gallery-item.d-block.card-hover
    .btn.btn-icon.btn-lg.btn-primary.rounded-circle.pe-none.position-absolute.top-50.start-50.translate-middle.zindex-3
      i.ai-play-filled
    .d-flex.justify-content-center.align-items-center.position-absolute.top-0.start-0.w-100.h-100.rounded-4.overflow-hidden.zindex-2.opacity-0
      .position-absolute.bottom-0.start-0.w-100.text-center.text-white.fs-sm.fw-medium.zindex-2.pb-3
        | Video caption
      .position-absolute.top-0.start-0.w-100.h-100.bg-dark.opacity-40
    img(src="assets/img/landing/product/video-cover.jpg", alt="Video caption").d-block.rounded-4

Media: Iframe (Google map)

Google map embed

<!-- Iframe (Google map) -->
<div class="gallery">
  <a href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193595.91476818218!2d-74.11976253858133!3d40.69740344296443!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2sua!4v1568574342685!5m2!1sen!2sua" class="gallery-item d-block card-hover" data-iframe="true">
    <div class="d-flex justify-content-center align-items-center position-absolute top-0 start-0 w-100 h-100 rounded-4 overflow-hidden zindex-2 opacity-0">
      <i class="ai-zoom-in fs-2 text-white position-relative zindex-2"></i>
      <div class="position-absolute bottom-0 start-0 w-100 text-center text-white fs-sm fw-medium zindex-2 pb-3">
        Google map embed
      </div>
      <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-40"></div>
    </div>
    <img src="assets/img/map.jpg" class="d-block rounded-4" alt="Google map embed">
  </a>
</div>

// Iframe (Google map)
.gallery
  a(href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193595.91476818218!2d-74.11976253858133!3d40.69740344296443!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2sua!4v1568574342685!5m2!1sen!2sua" data-iframe="true").gallery-item.d-block.card-hover
    .d-flex.justify-content-center.align-items-center.position-absolute.top-0.start-0.w-100.h-100.rounded-4.overflow-hidden.zindex-2.opacity-0
      i.ai-zoom-in.fs-2.text-white.position-relative.zindex-2
      .position-absolute.bottom-0.start-0.w-100.text-center.text-white.fs-sm.fw-medium.zindex-2.pb-3
        | Google map embed
      .position-absolute.top-0.start-0.w-100.h-100.bg-dark.opacity-40
    img(src="assets/img/map.jpg", alt="Google map embed").d-block.rounded-4

Zoom effect

Image caption

<!-- Image gallery with zooming hover effect -->
<div class="gallery">
  <a href="assets/img/portfolio/single/v1/04.jpg" class="gallery-item d-block card-hover zoom-effect">
    <div class="d-flex justify-content-center align-items-center position-absolute top-0 start-0 w-100 h-100 rounded-4 overflow-hidden zindex-2 opacity-0">
      <i class="ai-zoom-in fs-2 text-white position-relative zindex-2"></i>
      <div class="position-absolute bottom-0 start-0 w-100 text-center text-white fs-sm fw-medium zindex-2 pb-3">
        Image caption
      </div>
      <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-40"></div>
    </div>
    <div class="zoom-effect-wrapper rounded-4">
      <img src="assets/img/portfolio/single/v1/04.jpg" class="zoom-effect-img" alt="Image caption">
    </div>
  </a>
</div>

// Image gallery with zooming hover effect
.gallery
  a(href="assets/img/portfolio/single/v1/04.jpg").gallery-item.d-block.card-hover.zoom-effect
    .d-flex.justify-content-center.align-items-center.position-absolute.top-0.start-0.w-100.h-100.rounded-4.overflow-hidden.zindex-2.opacity-0
      i.ai-zoom-in.fs-2.text-white.position-relative.zindex-2
      .position-absolute.bottom-0.start-0.w-100.text-center.text-white.fs-sm.fw-medium.zindex-2.pb-3
        | Image caption
      .position-absolute.top-0.start-0.w-100.h-100.bg-dark.opacity-40
    .zoom-effect-wrapper.rounded-4
      img(src="assets/img/portfolio/single/v1/04.jpg", alt="Image caption").zoom-effect-img

Thumbnails

Image #1

Image #2

Image #3

<!-- Gallery grid with enabled thumbnails -->
<div class="gallery row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4" data-thumbnails="true">

  <!-- Item -->
  <div class="col">
    <a href="assets/img/landing/corporate/features/01.jpg" class="gallery-item d-block card-hover">
      <div class="d-flex justify-content-center align-items-center position-absolute top-0 start-0 w-100 h-100 rounded-4 overflow-hidden zindex-2 opacity-0">
        <i class="ai-zoom-in fs-2 text-white position-relative zindex-2"></i>
        <div class="position-absolute bottom-0 start-0 w-100 text-center text-white fs-sm fw-medium zindex-2 pb-3">
          Image #1
        </div>
        <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-40"></div>
      </div>
      <img src="assets/img/landing/corporate/features/01.jpg" class="d-block rounded-4" alt="Image #1">
    </a>
  </div>

  <!-- Item -->
  <div class="col">
    <a href="assets/img/landing/corporate/features/02.jpg" class="gallery-item d-block card-hover">
      <div class="d-flex justify-content-center align-items-center position-absolute top-0 start-0 w-100 h-100 rounded-4 overflow-hidden zindex-2 opacity-0">
        <i class="ai-zoom-in fs-2 text-white position-relative zindex-2"></i>
        <div class="position-absolute bottom-0 start-0 w-100 text-center text-white fs-sm fw-medium zindex-2 pb-3">
          Image #2
        </div>
        <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-40"></div>
      </div>
      <img src="assets/img/landing/corporate/features/02.jpg" class="d-block rounded-4" alt="Image #2">
    </a>
  </div>

  <!-- Item -->
  <div class="col">
    <a href="assets/img/landing/corporate/features/03.jpg" class="gallery-item d-block card-hover">
      <div class="d-flex justify-content-center align-items-center position-absolute top-0 start-0 w-100 h-100 rounded-4 overflow-hidden zindex-2 opacity-0">
        <i class="ai-zoom-in fs-2 text-white position-relative zindex-2"></i>
        <div class="position-absolute bottom-0 start-0 w-100 text-center text-white fs-sm fw-medium zindex-2 pb-3">
          Image #3
        </div>
        <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-40"></div>
      </div>
      <img src="assets/img/landing/corporate/features/03.jpg" class="d-block rounded-4" alt="Image #3s">
    </a>
  </div>
</div>

// Gallery grid with enabled thumbnails
.gallery.row.row-cols-1.row-cols-sm-2.row-cols-md-3.g-4(data-thumbnails="true")

  // Item
  .col
    a(href="assets/img/landing/corporate/features/01.jpg").gallery-item.d-block.card-hover
      .d-flex.justify-content-center.align-items-center.position-absolute.top-0.start-0.w-100.h-100.rounded-4.overflow-hidden.zindex-2.opacity-0
        i.ai-zoom-in.fs-2.text-white.position-relative.zindex-2
        .position-absolute.bottom-0.start-0.w-100.text-center.text-white.fs-sm.fw-medium.zindex-2.pb-3
          | Image #1
        .position-absolute.top-0.start-0.w-100.h-100.bg-dark.opacity-40
      img(src="assets/img/landing/corporate/features/01.jpg", alt="Image #1").d-block.rounded-4
  
  // Item
  .col
    a(href="assets/img/landing/corporate/features/02.jpg").gallery-item.d-block.card-hover
      .d-flex.justify-content-center.align-items-center.position-absolute.top-0.start-0.w-100.h-100.rounded-4.overflow-hidden.zindex-2.opacity-0
        i.ai-zoom-in.fs-2.text-white.position-relative.zindex-2
        .position-absolute.bottom-0.start-0.w-100.text-center.text-white.fs-sm.fw-medium.zindex-2.pb-3
          | Image #2
        .position-absolute.top-0.start-0.w-100.h-100.bg-dark.opacity-40
      img(src="assets/img/landing/corporate/features/02.jpg", alt="Image #2").d-block.rounded-4
  
  // Item
  .col
    a(href="assets/img/landing/corporate/features/03.jpg").gallery-item.d-block.card-hover
      .d-flex.justify-content-center.align-items-center.position-absolute.top-0.start-0.w-100.h-100.rounded-4.overflow-hidden.zindex-2.opacity-0
        i.ai-zoom-in.fs-2.text-white.position-relative.zindex-2
        .position-absolute.bottom-0.start-0.w-100.text-center.text-white.fs-sm.fw-medium.zindex-2.pb-3
          | Image #3
        .position-absolute.top-0.start-0.w-100.h-100.bg-dark.opacity-40
      img(src="assets/img/landing/corporate/features/03.jpg", alt="Image #3").d-block.rounded-4

Inside card

Card title

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 overflow-hidden rounded-5">
  <a href="assets/img/landing/web-studio/industries/03.jpg" class="gallery-item d-block card-hover">
    <div class="d-flex justify-content-center align-items-center position-absolute top-0 start-0 w-100 h-100 rounded-4 overflow-hidden zindex-2 opacity-0">
      <i class="ai-zoom-in fs-2 text-white position-relative zindex-2"></i>
      <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-40"></div>
    </div>
    <img src="assets/img/landing/web-studio/industries/03.jpg" class="card-img-top" alt="Card image">
  </a>
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">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-primary">Go somewhere</a>
  </div>
</div>

// Gallery inside card
.card.gallery.overflow-hidden.rounded-5
  a(href="assets/img/landing/web-studio/industries/03.jpg").gallery-item.d-block.card-hover
    .d-flex.justify-content-center.align-items-center.position-absolute.top-0.start-0.w-100.h-100.zindex-2.opacity-0
      i.ai-zoom-in.fs-2.text-white.position-relative.zindex-2
      .position-absolute.top-0.start-0.w-100.h-100.bg-dark.opacity-40
    img(src="assets/img/landing/web-studio/industries/03.jpg", alt="Card image").card-img-top
  .card-body
    h4.card-title Card title
    p.card-text Some quick example text to build on the card title and make up the bulk of the card"s content.
    a(href="#").btn.btn-primary
      | Go somewhere

Content

Components

Utilities

Menu