Lightbox options

Lightbox is available in the Single Image, Grid, Masonry Grid modules of BM Content Builder.

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

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

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.

Was this article helpful?

Related Articles