Gallery (Lightbox)

JavaScript based lightbox component for presenting various types of media.

Silicon 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

For Carousel example you will need Swiper plugin css and js linked to your document: assets/vendor/swiper/swiper-bundle.min.css and assets/vendor/swiper/swiper-bundle.min.js.

Use this page as a reference.

Gallery image caption

<!-- Image gallery -->
<div class="gallery">
  <a href="assets/img/portfolio/courses/08.jpg" class="gallery-item rounded-3" data-sub-html='<h6 class="text-light">Gallery image caption</h6>'>
    <img src="assets/img/portfolio/courses/08.jpg" alt="Gallery thumbnail">
    <div class="gallery-item-caption fs-sm fw-medium">Gallery image caption</div>
  </a>
</div>

Media: Video

Preview
HTML

Gallery video caption

<!-- Video gallery -->
<div class="gallery" data-video="true">
  <a href="https://www.youtube.com/watch?v=8KaJRw-rfn8" class="gallery-item video-item rounded-3" data-sub-html='<h6 class="fs-sm text-light">Gallery video caption</h6>'>
    <img src="assets/img/portfolio/courses/01.jpg" alt="Gallery thumbnail">
    <div class="gallery-item-caption fs-sm fw-medium">Gallery video caption</div>
  </a>
</div>

Media: Iframe (Google map)

Preview
HTML

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" data-iframe="true" class="gallery-item rounded-2" data-sub-html='<h6 class="fs-sm text-light">Google map embed</h6>'>
    <img src="assets/img/portfolio/courses/map.jpg" alt="Gallery thumbnail">
    <div class="gallery-item-caption fs-sm fw-medium">Google map embed</div>
  </a>
</div>

Permanent hover state

Preview
HTML

Silicon Inc.

Showreel by Marvin McKinney

<!-- Permanent hover state -->
<div class="gallery" data-video="true">
  <a href="https://www.youtube.com/watch?v=zPo5ZaH6sW8" class="gallery-item video-item is-hovered rounded-3" data-sub-html='<h6 class="fs-sm text-light">Silicon Inc. Showreel by Marvin McKinney</h6>'>
    <img src="assets/img/about/gallery/01.jpg" alt="Gallery thumbnail">
    <div class="gallery-item-caption p-4">
      <h4 class="text-light mb-1">Silicon Inc.</h4>
      <p class="mb-0">Showreel by Marvin McKinney</p>
    </div>
  </a>
</div>

Grid with gutters

Preview
HTML

Gallery image caption

Gallery video caption

Gallery image caption

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

  <!-- Item -->
  <div class="col">
    <a href="assets/img/portfolio/courses/02.jpg" class="gallery-item rounded-3" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
      <img src="assets/img/portfolio/courses/02.jpg" alt="Gallery thumbnail">
      <div class="gallery-item-caption fs-sm fw-medium">Gallery image caption</div>
    </a>
  </div>

  <!-- Item -->
  <div class="col">
    <a href="https://www.youtube.com/watch?v=8KaJRw-rfn8" class="gallery-item video-item rounded-3" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
      <img src="assets/img/portfolio/courses/01.jpg" alt="Gallery thumbnail">
      <div class="gallery-item-caption fs-sm fw-medium">Gallery video caption</div>
    </a>
  </div>

  <!-- Add as many items as you need -->
</div>

Grid no gutters

Preview
HTML

Gallery image caption

Gallery video caption

Gallery image caption

<!-- Gallery grid no gutters -->
<div class="gallery row row-cols-1 row-cols-sm-2 row-cols-md-3 g-0" data-video="true">

  <!-- Item -->
  <div class="col border border-light">
    <a href="assets/img/portfolio/courses/02.jpg" class="gallery-item rounded-3" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
      <img src="assets/img/portfolio/courses/02.jpg" alt="Gallery thumbnail">
      <div class="gallery-item-caption fs-sm fw-medium">Gallery image caption</div>
    </a>
  </div>

  <!-- Item -->
  <div class="col border border-light">
    <a href="https://www.youtube.com/watch?v=8KaJRw-rfn8" class="gallery-item video-item rounded-3" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
      <img src="assets/img/portfolio/courses/01.jpg" alt="Gallery thumbnail">
      <div class="gallery-item-caption fs-sm fw-medium">Gallery video caption</div>
    </a>
  </div>

  <!-- Add as many items as you need -->
</div>

Inside card

Preview
HTML

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">
  <a href="assets/img/portfolio/courses/03.jpg" class="gallery-item card-img-top" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
    <img src="assets/img/portfolio/courses/03.jpg" alt="Gallery thumbnail">
  </a>
  <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>

Inside carousel

Preview
HTML

Gallery image caption

Gallery video caption

Gallery image caption

Gallery video caption

<!-- Gallery inside carousel -->
<div class="position-relative px-md-5">
  <button type="button" id="prev" class="btn btn-prev btn-icon btn-sm position-absolute top-50 translate-middle-y start-0 d-none d-md-inline-flex mt-n4" aria-label="Previous">
    <i class="bx bx-chevron-left"></i>
  </button>
  <button type="button" id="next" class="btn btn-next btn-icon btn-sm position-absolute top-50 translate-middle-y end-0 d-none d-md-inline-flex mt-n4" aria-label="Next">
    <i class="bx bx-chevron-right"></i>
  </button>
  <div class="swiper pt-1" data-swiper-options='{
    "slidesPerView": 1,
    "spaceBetween": 20,
    "loop": true,
    "pagination": {
      "el": ".swiper-pagination",
      "clickable": true
    },
    "navigation": {
      "prevEl": "#prev",
      "nextEl": "#next"
    },
    "breakpoints": {
      "500": {
        "slidesPerView": 2,
        "spaceBetween": 16
      },
      "700": {
        "slidesPerView": 2,
        "spaceBetween": 24
      },
      "1000": {
        "slidesPerView": 3,
        "spaceBetween": 24
      }
    }
  }'>
    <div class="swiper-wrapper gallery" data-video="true">

      <!-- Item -->
      <div class="swiper-slide">
        <a href="assets/img/portfolio/courses/08.jpg" class="gallery-item rounded-3" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
          <img src="assets/img/portfolio/courses/08.jpg" alt="Gallery thumbnail">
          <div class="gallery-item-caption fs-sm fw-medium">Gallery image caption</div>
        </a>    
      </div>

      <!-- Item -->
      <div class="swiper-slide">
        <a href="https://www.youtube.com/watch?v=8KaJRw-rfn8" class="gallery-item video-item rounded-3" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
          <img src="assets/img/portfolio/courses/01.jpg" alt="Gallery thumbnail">
          <div class="gallery-item-caption fs-sm fw-medium">Gallery video caption</div>
        </a>
      </div>

      <!-- Item -->
      <div class="swiper-slide">
        <a href="assets/img/portfolio/courses/03.jpg" class="gallery-item rounded-3" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
          <img src="assets/img/portfolio/courses/03.jpg" alt="Gallery thumbnail">
          <div class="gallery-item-caption fs-sm fw-medium">Gallery image caption</div>
        </a>
      </div>

      <!-- Item -->
      <div class="swiper-slide">
        <a href="assets/img/portfolio/courses/07.jpg" class="gallery-item rounded-3" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
          <img src="assets/img/portfolio/courses/07.jpg" alt="Gallery thumbnail">
          <div class="gallery-item-caption fs-sm fw-medium">Gallery image caption</div>
        </a>
      </div>
    </div>
    <div class="swiper-pagination position-relative pt-3 pt-sm-4 mt-4"></div>
  </div>
</div>

Thumbnails

Preview
HTML

Gallery image caption 1

Gallery image caption 2

Gallery image caption 3

Gallery image caption 4

Gallery image caption 5

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

  <!-- Item -->
  <div class="col-md-5">
    <a href="assets/img/about/gallery/01.jpg" class="gallery-item rounded-3" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption 1</h6>'>
      <img src="assets/img/about/gallery/01.jpg" alt="Gallery thumbnail">
      <div class="gallery-item-caption fs-sm fw-medium">Gallery image caption 1</div>
    </a>
  </div>

  <div class="col-md-3 col-sm-5">

    <!-- Item -->
    <a href="assets/img/about/gallery/02.jpg" class="gallery-item rounded-3 mb-4" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption 2</h6>'>
      <img src="assets/img/about/gallery/02.jpg" alt="Gallery thumbnail">
      <div class="gallery-item-caption fs-sm fw-medium">Gallery image caption 2</div>
    </a>

    <!-- Item -->
    <a href="assets/img/about/gallery/03.jpg" class="gallery-item rounded-3" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption 3</h6>'>
      <img src="assets/img/about/gallery/03.jpg" alt="Gallery thumbnail">
      <div class="gallery-item-caption fs-sm fw-medium">Gallery image caption 3</div>
    </a>
  </div>

  <div class="col-md-4 col-sm-7">

    <!-- Item -->
    <a href="assets/img/about/gallery/04.jpg" class="gallery-item rounded-3 mb-4" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption 4</h6>'>
      <img src="assets/img/about/gallery/04.jpg" alt="Gallery thumbnail">
      <div class="gallery-item-caption fs-sm fw-medium">Gallery image caption 4</div>
    </a>

    <!-- Item -->
    <a href="assets/img/about/gallery/05.jpg" class="gallery-item rounded-3" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption 5</h6>'>
      <img src="assets/img/about/gallery/05.jpg" alt="Gallery thumbnail">
      <div class="gallery-item-caption fs-sm fw-medium">Gallery image caption 5</div>
    </a>
  </div>
</div>