Silicon UI Kit

##### Menu

Preview Docs

### Content

Typography Icon font Code Images & figures Tables

### Components

Accordion Alerts Audio player Badges Blog components Breadcrumb Buttons Button group Cards Carousel (Slider) Collapse Dropdowns Forms Gallery (Lightbox) Image comparison slider Input group List group Modal Navbar Offcanvas Pagination Parallax Pills Placeholders Popovers Portfolio components Pricing Progress bars Social buttons Spinners Steps Tabs Team Testimonials / reviews Toasts Tooltips Video popup

### Utilities

Bootstrap Silicon

# 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.

## Media: Image

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

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)

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

#### 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

Gallery image caption
Gallery video caption
Gallery image caption
Gallery image caption
Gallery image 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

Gallery image caption
Gallery video caption
Gallery image caption
Gallery image caption
Gallery image 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

##### 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

    <!-- 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">
        <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">
        <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

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>

Top