lightgallery.js

Full featured javascript lightbox gallery, No dependencies.

Installation

Add styles in <head></head>

<link rel="stylesheet" href="src/plugins/lightgallery.js/dist/css/lightgallery.min.css">

Add script right before closing </body> tag, and initialize lightgallery.js

<!-- Plugin js -->
<script src="src/plugins/lightgallery.js/dist/js/lightgallery.min.js"></script>
<script src="src/plugins/lightgallery.js/demo/js/lg-thumbnail.min.js"></script>
<script src="src/plugins/lightgallery.js/demo/js/lg-video.js"></script>

<!-- Theme js -->
<script src="src/js/theme.js"></script>

If you want to edit lightgallery.js open theme.js and edit in this function myLightgallery();

Example gallery

Image Description — Logo Design
Rebranding Your Brand with new Logo

<div class="container">
  <!-- Portfolio Content -->
  <div class="portfolio row g-0 lightgallery-thumbnail">
    <figure data-src="src/img-min/project/project_1.jpg"  class="col-sm-6 col-lg-4 portfolio-item branding" data-sub-html="title images">
      <img class="portfolio-image-2" src="src/img-min/project/project_1.jpg" alt="Image Description">
      <figcaption class="portfolio-info-2">
        <div class="portfolio-info-content-2">
          <h4 class="h5 mb-3 text-white">Logo Design</h4>
          <small class="d-block text-light">Rebranding Your Brand with new Logo</small>
        </div>
      </figcaption>
    </figure>

    <figure data-src="src/img-min/project/project_2.jpg"  class="col-sm-6 col-lg-4 portfolio-item photovid branding web" data-sub-html="title images">
      <img class="portfolio-image-2" src="src/img-min/project/project_2.jpg" alt="Image Description">
      <figcaption class="portfolio-info-2">
        <div class="portfolio-info-content-2">
          <h4 class="h5 mb-3 text-white">Web</h4>
          <small class="d-block text-light">Web Development Service</small>
        </div>
      </figcaption>
    </figure>

    <figure data-src="src/img-min/project/project_3.jpg"  class="col-sm-6 col-lg-4 portfolio-item graphic" data-sub-html="title images">
      <img class="portfolio-image-2" src="src/img-min/project/project_3.jpg" alt="Image Description">
      <figcaption class="portfolio-info-2">
        <div class="portfolio-info-content-2">
          <h4 class="h5 mb-3 text-white">Graphic</h4>
          <small class="d-block text-light">Graphic Design for Marketing</small>
        </div>
      </figcaption>
    </figure>

    <figure data-src="src/img-min/project/project_4.jpg"  class="col-sm-6 col-lg-4 portfolio-item branding graphic" data-sub-html="title images">
      <img class="portfolio-image-2" src="src/img-min/project/project_4.jpg" alt="Image Description">
      <figcaption class="portfolio-info-2">
        <div class="portfolio-info-content-2">
          <h4 class="h5 mb-3 text-white">Video</h4>
          <small class="d-block text-light">Video Sales and Marketing</small>
        </div>
      </figcaption>
    </figure>

    <figure data-src="src/img-min/project/project_5.jpg"  class="col-sm-6 col-lg-4 portfolio-item photovid" data-sub-html="title images">
      <img class="portfolio-image-2" src="src/img-min/project/project_5.jpg" alt="Image Description">
      <figcaption class="portfolio-info-2">
        <div class="portfolio-info-content-2">
          <h4 class="h5 mb-3 text-white">Photography</h4>
          <small class="d-block text-light">Record Your Best Moment</small>
        </div>
      </figcaption>
    </figure>

    <figure data-src="src/img-min/project/project_6.jpg"  class="col-sm-6 col-lg-4 portfolio-item web" data-sub-html="title images">
      <img class="portfolio-image-2" src="src/img-min/project/project_6.jpg" alt="Image Description">
      <figcaption class="portfolio-info-2">
        <div class="portfolio-info-content-2">
          <h4 class="h5 mb-3 text-white">Apps</h4>
          <small class="d-block text-light">Apps Development and Games</small>
        </div>
      </figcaption>
    </figure>
  </div>
</div>

More example lightgallery.js in here Portfolio section

Popup video

Watch Video

<div class="d-inline-block lightgallery-thumbnail">
  <a class="btn btn-light border text-primary mb-3 mb-md-0 hover-button-up" href="https://www.youtube.com/watch?v=B7UG9v-n6WI">
    <!-- <i class="fas fa-play"></i> -->
    <svg class="bi bi-play-fill ms-1 mb-1 me-2 rtl-180" width="1.5rem" height="1.5rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 010 1.393z"></path>
    </svg>Watch Video
  </a>
</div>

More example lightgallery.js in here Portfolio section

For complete documentation read in here

Slider popup

<!-- slider -->
<div class="lightgallery-slider mb-7 mb-lg-3 carousel nav-inset-button nav-dark-button" data-flickity='{ "cellAlign": "left", "wrapAround": true, "pageDots": false, "draggable": false, "adaptiveHeight": true, "prevNextButtons": true , "imagesLoaded": true }'>
  <!-- item -->
  <div class="carousel-cell slider-item text-center col-12 col-md-6 px-2" data-src="src/img-min/project/project_1.jpg" data-sub-html="Screenshot 1">
    <img class="img-fluid d-inline-block" src="src/img-min/project/project_1.jpg">
  </div>
  <!-- item -->
  <div class="carousel-cell slider-item text-center col-12 col-md-6 px-2" data-src="src/img-min/project/project_2.jpg" data-sub-html="Screenshot 2">
    <img class="img-fluid d-inline-block" src="src/img-min/project/project_2.jpg">
  </div>
  <!-- item -->
  <div class="carousel-cell slider-item text-center col-12 col-md-6 px-2" data-src="src/img-min/project/project_3.jpg" data-sub-html="Screenshot 3">
    <img class="img-fluid d-inline-block" src="src/img-min/project/project_3.jpg">
  </div>
</div><!-- end slider -->

Note: This features is required Flickity slider and can't applied in flickity draggable style, other style work fine.

For complete documentation read in here