<a href="#" class="js-lightbox-toggle">show lightbox</a>

The js-lightbox-toggle class will open the lightbox.

Note: The component will self instantiate if that class exists on the page, but you can still fire up your own by running:

new LightBox({ $opener: ".js-other-lightbox-opener" });

If you want more than one lightbox in the page, with different openers and content, you have to specify the $el parameter.

new LightBox({ $el: ".js-element" });


Some parameters can be customized with data attributes in the opener element:

data-lightbox-class and data-lightbox-showpreloader useful when you want to fetch content with an ajax call

<a href="#" class="js-lightbox-toggle" data-lightbox-class"some-custom-class" data-lightbox-showpreloader="true">show lightbox</a>

You can add a mobileBreakpoint parameter to set a specific breakpoint based on the window width. The Lightbox by default won't open on devices with small screens (< 500px), unless this parameter is set.

Note: To disable the breakpoint entirely, set the value to 0 as follows:

new Lightbox({
  mobileBreakpoint: 0

Updating the content

You can update the content with HTML directly triggering the ":lightbox/renderContent" event.

$("#js-row--content").on(":lightbox/open", function( ) {
  $("#js-row--content").trigger( ":lightbox/renderContent", "<img src='' height='600' width='800' />" );

Custom rendering of content

You can also specify a custom rendering function... a useful case for this is when having the data returned as JSON. This function must return the markup as a string.

new Lightbox({
  customRenderer: function(data) {
    return "<h1>" + data.title + "</h1><div class='contents'>" + data.contents + "</div>";

Updating the content from remote

Also, you can fetch content from remote triggering the event ":lightbox/fetchContent" with the url where you want to load the content. You have to add a reference in your script to "lib/components/controller" Also, you must instantiate the controller with "new Controller()" When the response of the ajax call is received, the path in the browser will be updated with the one that you pass on the parameters.

require([ ...., "lib/page/controller" ... ], function(..., Controller, ...)
$("#js-row--content").on(":lightbox/open", function( ) {
  $("#js-row--content").trigger( ":lightbox/fetchContent", "/relative/path/content" );

When you fetch content from remote, you would want to show the preloader with the data-lightbox-showpreloader parameter or with the parameter in the constructor if you are using it. The template for the preloader is placed within the layout, so you don't have to worry about that.

new Lightbox({
  showPreloader: true

Navigation within the lightbox

You can have links inside the lightbox to navigate to another url, without closing the lightbox.

In order to do that, add the links within the content of the ligthbox and give them the js-lightbox-navigation class with the href pointing to the url to load. js-lightbox-navigation These links will load the url in the href of the link on the lightbox