Extending Lightbox Options in Essential Grid

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;