Lighbox not showing captions

Bootstrap Studio Help
1

Morning hive mind.

I am trying to use lightbox Gallery and would like captions to appear with the images when they are clicked on. I have added data-title but this is not working. Does anyone else have any ideas?

2

You would need to update your js to look for the data-title

if (document.querySelectorAll('[data-bss-baguettebox]').length > 0) {
   baguetteBox.run('[data-bss-baguettebox]', { animation: 'slideIn' ,  captions: function(element) {
        return element.getElementsByTagName('img')[0].dataset.title;
    }} 
    );
}
3

Thank you so much. I feel a bit stupid not thinking about the JS!

4

2nd part that i have just seen. I have published the test site and it doesnt call the JS file when enlarged. On preview its fine but test site nothing. I’m stumped.

5

Check your developers tools for any errors, Also clear your cache or run in an incognito tab to see if you are being served the latest files.

It could also be worth turning on your version assets in export settings while you are developing.

6

Cleared Cache, went into incognito mode, assets is on still nothing. Have tried on Firefox/chrome and edge. Nothing.

7

here is the link Produkte kaufen - RBD The pics are at the bottom.

8

You have errors in your script.

image

9

This is not caused by one of my JS files, but looking through it seems to have been caused by connecting Reflow. I guess I will have to go to BSS or Reflow to have a look at the issue.

10

Try not minifying your css and js while you are developing, it makes it easier for you to find any problems

1 Like
11

Thanks Richards, i havent minimised them though. Always learning :slight_smile:

12

It will be in your export settings

13

I’ve looked there and they arent minimised.

14

The page doesn’t connenct to reflow.
You run the coockie consent twice, both in the HTML and in a javascript file.
In one of your js files you try to add an eventListener to null which throw an error
this is the code

for(var btnContainer = document.getElementById("myBtnContainer"), btns = btnContainer.getElementsByClassName("btn"), i = 0; i < btns.length; i++) btns[i].addEventListener("click", (function() {
	var t = document.getElementsByClassName("active");
	t[0].className = t[0].className.replace(" active", ""), this.className += " active"
}));

BTW when publish to the BSS Sites the CSS and Javascript are always minified

15

Thank you. I have seen the problems and now recitfied. I think i need to work a little more cleanly!!