Fullscreen Lightbox - Documentation | Space - 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">
                    <a data-fslightbox="gallery" href="../assets/img/documentation/img1-lg.jpg">
                      <img class="img-fluid" src="../assets/img/documentation/img1.jpg" alt="Image Description">
                    </a>
                  </div>

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

                  <div class="col-sm-4">
                    <a data-fslightbox="gallery" href="../assets/img/documentation/img3-lg.jpg">
                      <img class="img-fluid" src="../assets/img/documentation/img3.jpg" alt="Image Description">
                    </a>
                  </div>
                </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=0qisGSwZym4">
                      <img class="img-fluid" src="../assets/img/1920x1080/img1.jpg" alt="Image Description">
                    </a>
                  </div>
                </div>
                <!-- End Gallery -->