Image Descriptionplayworks
v3.2.2
Image Description

No Results

  • Get Support
  • Preview Demo
Image Descriptionplayworks
v3.2.2
  • Documentation
  • Introduction
  • Getting started
  • Getting Started
  • Gulp
  • Customization
  • Credits
  • Changelog
  • Design & Graphics
  • Bootstrap Icons
  • Components
  • Accordion
  • Alerts
  • Avatars
  • Badge
  • Breadcrumb
  • Buttons
  • Cards
  • Collapse
  • Column Divider
  • Devices
  • Divider
  • Dropdowns
  • List Group
  • Lists
  • Modal
  • Offcanvas
  • Pagination
  • Popovers
  • Progress
  • Shapes
  • Sliding Image
  • Spinners
  • Steps
  • Tab
  • Tables
  • Toasts
  • Tooltips
  • Typography
  • Navbars
  • Navbar
  • Navs
  • Mega Menu
  • Scrollspy
  • Basic forms
  • Basic Forms
  • Checks & Switches
  • Input Group
  • Media
  • Fullscreen Lightbox
  • Swiper Touch Slider
  • Others
  • Sticky Block
  • Countdown
  • Video Background
  • Go To
  • Utilities
  • Backgrounds
  • Borders
  • Colors
  • Links
  • Position
  • Shadows
  • Sizing
  • Spacing
  • Z-index

Fullscreen Lightbox

Simple and powerful lightbox for displaying photos, HTML5 or YouTube videos in clean overlaying box.

Fullscreen Lightbox documentation

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
Image Description
Image Description
Image Description
          
            <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
Image Description
          
            <!-- Gallery -->
            <div class="row">
              <div class="col-sm-4 mb-3 mb-sm-0">
                <a data-fslightbox="html5-video" data-video-poster="/assets/video/our-business-is-growing.jpg" href="/assets/video/our-business-is-growing.mp4">
                  <img class="img-fluid" src="/assets/video/our-business-is-growing.jpg" alt="Image Description">
                </a>
              </div>
            </div>
            <!-- End Gallery -->
          
        

YouTube videos

  • Preview
  • HTML
Image Description
          
            <!-- 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 -->