Lightbox options

Lightbox is popular way to showcase WordPress gallery. It is available in the Single Image, Grid, Masonry Grid modules of BM Content Builder.

Lightbox buttons(Show or not)

If you want to disable the buttons(zoom, fullscreen, share, etc) at the Lightbox interface, you could find the options in the “Art Theme > Theme Options > Content” tab:

Skin

You could set the lightbox skin, it supports the dark and light skins.

Please use the custom CSS(“Appearance > Customize: Additional CSS”) to adjust the background color:

.pswp-light-skin .pswp__bg {
    background: #cccccc;
}

Lightbox Caption

If the image was set the caption in the Media Library:

The caption will be shown under the image:

Please don’t use the double quotation marks in the caption. Use the " to replace the ".

Please don’t enter HTML codes directly also, please encode the HTML characters. It is easy by 3rd tools (like Textfixer, Web2generators ). Paste the encoded codes:

Please use the custom CSS(“Appearance > Customize: Additional CSS”) to adjust the caption text style:

.pswp__caption__center {
    text-align: center; 
    font-size: 13px;
    padding: 10px;
    line-height: 20px;
    color: #CCC;
}

Enable All Images Navigated in the Same Lightbox

Normally, if you enable Lightbox in a module, the images can only be navigated(Next/Pre) in the same module. If you want the images in the different modules(Single Image, Grid, Masonry Modules) navigated in the same Lightbox, please enable the option in the Page/Portfolio editing panel.

FAQs

How to disable Lightbox?
Please paste the custom css(paste in Appearance > Customize : Additional CSS):
div[data-lightbox="true"] { pointer-events: none; }

How to disable closing Lightbox by mouse scroll wheel?
Please go to Plugins>Plugin Editor, select BM content builder, find: “assets>js>modules-global.js” add the codes below line 1012: closeOnScroll: false,

How to custom the icons (prev/next, share… )?
The icons (prev/next, share … ) are from the image files(PNG and SVG) in the /plugins/bm-builder/assets/css/skin/photoswipe/default folder.

How to Remove the Top bar and Caption BG color?
Please paste the custom css(paste in Appearance > Customize : Additional CSS):
.pswp-light-skin .pswp__ui--fit .pswp__caption, .pswp-light-skin .pswp__ui--fit .pswp__top-bar { background-color: transparent; }