Skip to main content

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
Image Description

Web

Web Development Service
Image Description

Graphic

Graphic Design for Marketing
Image Description

Video

Video Sales and Marketing
Image Description

Photography

Record Your Best Moment
Image Description

Apps

Apps Development and Games
            
              <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


            
              <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