Extending Lightbox Options in Essential Grid

This article will show you some API methods to customize the Lightbox using Custom CSS/JS

  • Quick Tip:
    Refer to this FancyBox API Docs that explains more about the methods to control Lightbox

Contents

1. Display Lightbox Thumbnails at the bottom

This API Method will display the Lightbox Thumbnails horizontally at the bottom.

Edit the Grid settings and insert the Custom JS code below into the Custom JavaScript section.

Edit the Grid Skin and insert the Custom CSS code below into the Global Custom CSS.

Output :

2. Display Lightbox Thumbnails on opening

back to top
This API method forces the Lightbox to display the thumbnails on initial load.

Edit the Grid settings and insert the Custom JS code below into the Custom JavaScript section.

3. Force Lightbox Fullscreen Display

back to top
This API method forces the Lightbox to display Fullscreen on initial load.

Edit the Grid settings and insert the Custom JS code below into the Custom JavaScript section.

4. Change the Lightbox Background Color

back to top
The Custom CSS code below will allow you to adjust the background Opacity and Color.

Edit the Grid Skin and insert the Custom CSS code below into the Global Custom CSS.

5. Disable right-click on Lightbox Images

back to top
This API Method allows you to Disable right-click and use simple image protection for images

Edit the Grid settings and insert the Custom JS code below into the Custom JavaScript section.