Fullscreen Lightbox - Documentation | Front - Multipurpose Responsive Template

How to use

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

        
          <script src="../assets/vendor/fslightbox/index.js"></script>

Gallery

Preview
HTML

              
                <div class="row">
                  <div class="col-sm-4 mb-3 mb-sm-0">
                    <!-- Media Viewer -->
                    <a class="media-viewer" href="../assets/img/documentation/img1-lg.jpg" data-fslightbox="gallery">
                      <img class="img-fluid" src="../assets/img/documentation/img1.jpg" alt="Image Description">

                      <span class="media-viewer-container">
                        <span class="media-viewer-icon">
                          <i class="bi-plus media-viewer-icon-inner"></i>
                        </span>
                      </span>
                    </a>
                    <!-- End Media Viewer -->
                  </div>
                  <!-- End Col -->

                  <div class="col-sm-4 mb-3 mb-sm-0">
                    <!-- Media Viewer -->
                    <a class="media-viewer" href="../assets/img/documentation/img2-lg.jpg" data-fslightbox="gallery">
                      <img class="img-fluid" src="../assets/img/documentation/img2.jpg" alt="Image Description">

                      <span class="media-viewer-container">
                        <span class="media-viewer-icon">
                          <i class="bi-plus media-viewer-icon-inner"></i>
                        </span>
                      </span>
                    </a>
                    <!-- End Media Viewer -->
                  </div>
                  <!-- End Col -->

                  <div class="col-sm-4">
                    <!-- Media Viewer -->
                    <a class="media-viewer" href="../assets/img/documentation/img3-lg.jpg" data-fslightbox="gallery">
                      <img class="img-fluid" src="../assets/img/documentation/img3.jpg" alt="Image Description">

                      <span class="media-viewer-container">
                        <span class="media-viewer-icon">
                          <i class="bi-plus media-viewer-icon-inner"></i>
                        </span>
                      </span>
                    </a>
                    <!-- End Media Viewer -->
                  </div>
                  <!-- End Col -->
                </div>
                <!-- End Row -->

HTML5 videos

Preview
HTML

              
                <!-- Gallery -->
                <div class="row">
                  <div class="col-sm-4 mb-3 mb-sm-0">
                    <a data-fslightbox="html5-video" data-video-poster="../assets/video/working-in-office.jpg" href="../assets/video/working-in-office.mp4">
                      <img class="img-fluid" src="../assets/video/working-in-office.jpg" alt="Image Description">
                    </a>
                  </div>
                </div>
                <!-- End Gallery -->

YouTube videos

Preview
HTML

              
                <!-- Gallery -->
                <div class="row">
                  <div class="col-sm-4 mb-3 mb-sm-0">
                    <a data-fslightbox="youtube-video" data-video-poster="../assets/img/1920x1080/img1.jpg" href="https://www.youtube.com/watch?v=d4eDWc8g0e0">
                      <img class="img-fluid" src="../assets/img/1920x1080/img1.jpg" alt="Image Description">
                    </a>
                  </div>
                </div>
                <!-- End Gallery -->