The Worlds Most Powerful
WordPress Builder

If you Purchased & Registered a Slider Revolution License you can comfortably upgrade version 5.x to 6.0 from your WordPress Dashboard.

Why Activate Slider Revolution?

Activating Slider Revolution with your Personal Purchas Code will unlock all available Features.

Easy Live Updates
Personal License Key
200+ Template Library
1000+ Object Library
25+ Amazing Add-Ons
1on1 Ticket Support

*Regular License from $26. One License Key required per Domain.

Slider Revolution 6.0 NOW available!

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

1. Display Lightbox Thumbnails at the bottom

Note

This method works with a Custom Gallery and Custom Grid that uses the lightbox thumbnail feature.

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.

lightboxOptions.thumbs = {
    axis: ‘x’
};

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

.esgbox-container .esgbox-thumbs {
top: auto;
width: auto;
bottom: 0;
left: 0;
right : 0;
height: 95px;
padding: 10px 10px 5px 10px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.3);
}
 
.esgbox-container.esgbox-show-thumbs .esgbox-inner {
right: 0;
bottom: 95px;
}

Output :

2. Display Lightbox Thumbnails on opening

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.

lightboxOptions.thumbs = {
    autoStart: true
};

3. Force Lightbox Fullscreen Display

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.

lightboxOptions.fullScreen = {
autoStart: true
};

4. Change the Lightbox Background Color

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.

.esgbox-is-open .esgbox-bg {
    opacity: 1; /*Change the Background Opacity*/
    background: #1e1e1e; /*Change Background Color*/
}

5. Disable right-click on Lightbox Images

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.

lightboxOptions.protect = true;

Popular Solutions