Lightbox options

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

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

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