Left Align Caption When Lightbox Is Open

[manek43509]

I am trying to align the caption which displays when the lightbox opens and the image displays large. I have added CSS using the attribute .fancybox__caption and I know this is the right class to use because other changes I have made (ie. font size and weight) display correctly, but .fancybox__caption { text-align: left; } does nothing. Any ideas why this is?

[fancyapps]

Hi,

Here is one possible solution:

.fancybox__caption {
  margin-right: auto;
}

https://jsfiddle.net/c7gh48q9/

Another option would be to make it 100% wide:

.fancybox__caption {
   width: 100%;
}

https://jsfiddle.net/a3u8xLbn/

[manek43509]

Thank you! However, this now aligns the caption outside of the left edge of the image, which I don't think looks as good as having the caption in line with the left side of the image...

[fancyapps]

Unfortunately, this is not supported. It's a long story and it has to do with the fact that it is technically impossible to create a layout using CSS in which the image and caption area are scaled to fit vertically and horizontally, so that they are always the same width. Scaling using JS creates a problem that when the width changes, the caption can become multi-line, affecting the width of the image, thus requiring multiple-step resizing process (and that can cause performance issues). And then there is the problem that if the user, for example, uses a mobile device horizontally and the caption has more than these few words, then the image size would be resized to become comically tiny or even invisible.

One solution would be to set some max-width to the caption (for example, 400px), it would look better.

[manek43509]

Thank you for your response. That's disappointing to read. As you can see in my second screenshot, other lightbox plugins are able to do this (the second example is using the 'Featherlight' lightbox)!

For reasons I don't have time to go into now, I have ended up having to use one lightbox for single images embedded in a page, and a different lightbox for image galleries. I don't actually care much whether the captions appear centralised or left-aligned (in line with the left edge of the expanded image) – but I would like all the images and their captions to behave the same whether they are part of a gallery or not, purely for the sake of consistency.