Lightbox options

Lightbox is available in the Single ImageGridMasonry Grid modules of BM Content Builder.

Please go to “Arnold Theme > Theme Options > Content” tab, set to show/not the button in the Lightbox:

Skin

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

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

The caption will be shown under the image:

If you want to add HTML codes, please encode the HTML characters. It is easy by 3rd tools (like TextfixerWeb2generators ). Paste the encoded codes:

To adjust the caption text style, please use the custom CSS(“Appearance > Customize: Additional CSS”) :

.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.

If you edit a Page(or Portfolio), you will see this option

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; }

Was this article helpful?

Related Articles