Fullscreen Lightbox - Documentation | Front - 基于Boostrap5的多用途响应式模板库

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

预览
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="图片描述内容">

                      <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="图片描述内容">

                      <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="图片描述内容">

                      <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

预览
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="图片描述内容">
                    </a>
                  </div>
                </div>
                <!-- End Gallery -->

YouTube videos

预览
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="图片描述内容">
                    </a>
                  </div>
                </div>
                <!-- End Gallery -->