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

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;
Extending Lightbox Options in Essential Grid

Further Resources for Web Design and Development Enthusiasts

Alright! We've embarked on quite an adventure exploring the realms of this topic. But why stop there? The world of web design and development is vast, and there's always more to learn and discover. Let's dive into some resources that'll keep your knowledge fresh, your skills sharp, and your passion ignited:

The Author

KC

Strength does not come from winning. Your struggles develop your strengths. When you go through hardships and decide not to surrender, that is strength.

Liked this Post?
Please Share it!