Extend Default Lightbox Settings

Essential Grid uses FancyBox 2 as its default lightbox. And although the grid's lightbox settings has several adjustable options, you can add/change even more with some simple JavaScript.

From your grid’s “Lightbox” tab, you’ll find all of the built-in lightbox options that can be adjusted.  Here you’ll find options such as “padding”, “navigation”, etc.  But if you’d like to declare even more settings, this can be done by extending the default settings Object with jQuery.

In this example, we’ll set a default width and height for YouTube videos that are loaded into the lightbox, and also lock the aspect ratio to these size settings.

The custom code can be added to your grid’s “API/JavaScript” section:

Before:

After:

  • Quick Tip:
    Want to prevent the page from scrolling to the top when the lightbox opens? Use the following override: