▼
Streaming live at 10am (PST)

Multiline Picture Caption at Fullscreen Lightbox Gallery

#1

Hi Guys,

I need your help. In my gallery in full-screen mode, the description of the image should not be displayed in a single line, but in multiple lines. In the settings menu it is only possible to enter text without formatting. Too long text would be simply cut off. Does anyone know a solution?

Thanks and best regards
Dominic

#2

You need to edit to css of the lightbox.

  1. In the designer, set up your lightbox and put in your caption / description - a long one so that it goes multi line. Publish this to the live site.
  2. Then open the live website
  3. Open the lightbox image with the long caption
  4. Press F12. Now you can start to edit and manipulate the elements and css
  5. If you press Ctrl + Shift + C together you can then hover over elements and their attributes will show up in the styles panel at the bottom right.
  6. Now you can add, remove and edit the attributes of the lightbox elements - i.e. the caption element.
  7. Once you get it working how you want to - copy the css you've edited and paste it into the custom code of the website / of that single page.
  8. Depending on how the css works, you may have to use the !important attribute to get it working. Not "perfect" code, but if it works for this single element, great!

Best of luck. Any questions, shoot.

#3

Great, thanks you!

So after playing around the solution was to implement
.w-lightbox-caption {
white-space: normal;
}
into the css-Code. Now the caption-text is multilined.

Second question is how can I implement lists into that caption? My customer wants a little list in every picture. Can you help me out on this?

Thanks and best regards.

#4

I don't think it's achievable with the Webflow Lightbox Gallery. I think you'll need some custom code.

#5

Okay, so I followed the steps on this video: https://www.youtube.com/watch?v=Fue_IP9k6wQ
and it's working. Unfortunately, the video does not show how to switch between images in the full-screen view. (Arrow buttons)
Do you know how I can implement this?

#6

No, unfortunately with that solution i don't think it's possible to switch when in full screen mode.

closed #7

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.