Add more columns to lightbox?

On normal screen resolutions, the lightbox component has two columns. Is there a way to increase the number of columns? I can’t find it…

Thanks in advance!

The standard Lightbox Gallery component has 6 columns with a placeholder image in each. The layout of the columns changes depending on screen size, and is set via the Row Options.


You can add more images/columns by going to the Overview Panel, expanding the Lightbox elements until you get to the Row that contains the Photos, select a Column, right click and choose duplicate from the menu.

1 Like

Perfect! Thank you so much!

Is there any way to arrange the lightbox as columns? It would be an easy way to have a masonry look to the layout when the images are different aspect ratios.

Adding that code is outside my current skill level. Do you have a link for how to do that? Thanks!

You need to link two external javascript files

add this in the Lightbox-Gallery.js under the baguetteBox

const grid = document.querySelector('.photos');
const msnry = new Masonry( grid, {
  itemSelector: '.item',
  percentPosition: true
imagesLoaded( grid ).on( 'progress', () => msnry.layout());

and you are done

here is an example

1 Like

Thank you! It took me a bit, but I figured out how to add the code. And a bit more to realize it only shows up in preview, but it works perfectly. Is it sitewide, or do I need to duplicate it for every lightbox gallery?

If you replace the code in the Lightbox-Gallery.js with this

if (document.querySelectorAll("[data-bss-baguettebox]").length > 0) {"[data-bss-baguettebox]", { animation: "slideIn" });
const grids = [...document.querySelectorAll(".photos")];
grids.forEach((grid) => {
  const msnry = new Masonry(grid, {
    itemSelector: ".item",
    percentPosition: true,
  imagesLoaded(grid).on("progress", () => msnry.layout());

Then you can have more than one Gallery on the page and it will work on every page with galleries

1 Like

And it works on the no-gutters version too. Thank you so much!

baguetteBox start to be old and using a deprecated API so maybe you should choose another lightbox.
The GLightbox is popular, here is a demo GLightbox | A touchable pure Javascript lightbox

I am partial to Nanogallery2 myself.

One of the small touches that I like about Nanogallery is that you can go forward and backward through the slideshow by clicking not just ON the left and right arrows, but anywhere in the area above and below the arrows (similar to the Bootstrap Carousel.) With most other galleries, if you don’t click right on the arrow, it will close the gallery. I hate that.

Is baguetteBox what was included with BSS? I’m not sure what I added and what was already there.

Yes, BSS using the baguetteBox in the Lightbox Gallery. You have only added the masonry layout.
You can have a fixed height on your pictures, then you don’t need the extra javascript libraries imagesloaded.js and masonry.js
It looks like this

In the GLightbox config you can make it behave like the nanogalley’s lightbox only closing on the close button and slide to the next slide when click right to the picture and slide to prev picture when click left to the picture. Have a look


Looks good. Perhaps I’ll give it a try on the construction company website I’m currently building. He’s got a lot of pictures.


If you are working with a lot of pictures then nanogallery2 will be a better choice, It has nice galleries with lazy loading.
If you have a server with PHP then you can use the nanoPhotosProvider2 and only upload the “big pictures” to a folder and your gallery with thumbnails will be build automaticly

1 Like

Thanks for that tip!

Is this something I can use at my skill level?