Add more columns to lightbox?

Bootstrap Studio Help
1

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!

2

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.

image

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.

image
image354×515 12.4 KB

1 Like
3

Perfect! Thank you so much!

4

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.

5

https://getbootstrap.com/docs/5.2/examples/masonry/

6

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

7

You need to link two external javascript files
https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js
https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js

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
8

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?

9

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

if (document.querySelectorAll("[data-bss-baguettebox]").length > 0) {
  baguetteBox.run("[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
10

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

11

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

12

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.

13

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

14

@steveoglesby
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

@printninja
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

2 Likes
15

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.

16

@printninja

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
17

Thanks for that tip!

18

Is this something I can use at my skill level?