- Use the ALT tag on the image in your gallery as the place where you put the caption.
- Inject a script tag in your page OUTSIDE of the lightbox that loops through each thumbnail and modifies the JSON in the tag that Webflow renders for each gallery image. My script is below, and it works to render the ALT attribute’s text into the caption of the full-screen image simply by adding the “caption” element to the JSON object of each tag.
This script replaces each gallery thumbnail wrapper given its
classname which you MUST make unique to the page. I’ve used
.gallerythumbnail. Keep in mind that WF will render
them to lower case, so keep them lowercase in the WF editor
in order to avoid confusion.
The script loops over each thumbnail and finds its SCRIPT
tag which WF generates with some JSON you can attach a
caption value to. When a caption value exists, it will
render in the main view of the image in the lightbox.
const DGCs = document.querySelectorAll(’.gallerythumbnail’)
const imageAltText = thumb.parentNode.querySelector(‘img’).alt
const script = thumb.parentNode.querySelector(‘script’)
const imageJSON = JSON.parse(script.innerHTML)
imageJSON.items.caption = imageAltText
script.innerHTML = JSON.stringify(imageJSON)