Hi all, I would be happy to use the lightbox component but I don't understand how to add images nor set up the gallery. It seems that I should modify the JS but the lightbox component does not include any JS to modify (it import an URL that cannot be edited). Someone can help? Paolo
Hi Paola,
When you drag the Lightbox Gallery to your project it displays 6 images. To change an image you can double click on it and that will popup the Choose Image window. Click on the Import Image button on the bottom right. Now you can browse through your computer to find the image you want. Once you selected your image, you need to select it on the Choose Image window and click OK. Do this for all the images you want changed.
To delete the original images you don't want, on the bottom right of the app in the Design page, click on Images menu to expand it then right click on the image and select delete.
You shouldn't need to edit the Javascript. Here is the site that the script is from http://lokeshdhakar.com/projects/lightbox2/. If you needed to use the options part you can just add that as a separate script file by right clicking on the the Javascript menu in the Design pane of the app and select Create JS. Then double click on the untitled.js to insert your js code.
Saj
Thanks for your help but this doesn’t even change the image in the pop-up window 
One will also need to change the image file in the link that holds the image.
Sorry I still have a lot of questions about the built in image gallery, I think others will find it useful to know too:
What is the best practice for image size? as far as I understand it should be best to put a small preview image in the gallery (width 500px wide for moblie phones, perhaps smaller on larger screens if you want to load even faster based on screen width with a picture element) so it loads fast and the linked image can be larger and set to lazy-loading?
Is the linked image automatically lazy loaded since it’s just a link?
What is the best practice for image dimensions? Should we try to match what is already in there or as long as our images are all the same will it be ok?
I see how to change the images from 4 to 3 columns by changing the column width at least that part is easy, 5 is a little harder to do, is it possible to change a row to have 10 or 15 sections instead of 12 or is it too much trouble?
“holy 4 year old thread bump batman”…
imagery best practice is subjective to the UI patterns used in someone’s design/website, but one thing I do is make sure that my images that I import into BSS are all the same dimensions using Photoshop and that they are optimised for web.
Then, I also ensure that all the images used in the slides for the gallery/carousel are set to be responsive so that when columns change width the image scales to width of column, and then when clicked ands loightbox is activated, they will all be the same dimensions.
Is there a way to separate the galleries so when you open the light box it doesn’t cycle through all on the page?
edit: Found the instructions here for the included lightbox gallery:
https://lokeshdhakar.com/projects/lightbox2/
so the link data-lightbox=“photo” sets the image sets based on what’s in the quotation marks.
This probably adds more context for SEO too which is nice and has built in captions.
Thanks!
These are general WebDesign questions, better suited for the WebDesign Help category.
Best practice for image size in photo galleries is… there is no “best practice.” It all depends on the client, their requirements, and their intended audience. Some clients won’t want to sacrifice the quality of the image to save on file size. Others don’t care how pixelated or how many compression artifacts are introduced because they simply want the smallest file size. Some clients know their target audience all have access to high-speed internet. Some know their clients are still stuck on dial-up, or 3G connections. Some clients are completely clueless, and will rely on you to make all the decisions.
Thumbnail size in a gallery is a consequence of the maximum size the image can be in any given screen configuration. A gallery that has a configuration where there is a single column under the XS size might have a minimum width of about 540 px (a phone viewed in landscape mode) while others might use custom CSS and breakpoints to force the gallery to switch to two columns when the phone is turned sideways, and only need images that are 300 px wide. Maximum image size, again, is up to the client. Some don’t want to go above 800px by 600px, while others want to fill an 1980px by 1020px monitor. You don’t know until you talk to the client and find out what they expect their gallery to look like.
Bootstrap uses 12 columns by default. To go above 12, you’d need to configure a custom Bootstrap CSS. 5 is easily achieved in Bootstrap 4 with flexbox.