Title of photos in lightbox gallery

Webdesign Help
1

Hi, I have included a lightbox gallery on a website, and I would like to include the title of each photo inside the photo itself. Adding it outside is very easy, but I would like to add it inside the photo, at the base of the photo, with a translucent background. can someone tell me how to do it please?

2

EDIT: Ugh, apologies… after reading @kuligaposten’s post below, I realized that Lightbox2 was only used in Bootstrap Studio for websites made using Bootstrap 4.x.

Bootstrap 5.x websites use baguetteBox, which does have a caption feature.

If you’re talking about the Lightbox that’s built into Bootstrap Studio, there’s no simple way to do this. The JS and CSS are delivered by CDN. They would have to be downloaded, modified, and hosted locally. The actual Lightbox used is here

Lightbox2

It’s a very simple lightbox, and there are no built-in options for adding text in the manner you’ve described, so you’d have to customize the JS and CSS yourself.

It would probably be easier to use a different third-party lightbox that has a caption option already built into it, like this one…

*Slim Lightbox Plugin by tgundogdu | CodeCanyon *

But you’d have to buy it (it’s only $8 bucks though.)

*There are loads of other lightboxes out there, but many are WordPress plug-ins, or they use jQuery (not necessarily a deal-breaker) or the captions aren’t easily customizable. *

*If I recall correctly, @kuligaposten once created a lightbox using the standard Bootstrap Carousel, which already has captions as an option. Maybe he will chime in on your post. *

Last (and IMO, easiest) solution (assuming you want to stay with the lightbox included with BSS), would be to just make your captions part of the actual images using an image editing program like Photoshop to add the text and save it as a new image.

3

If you use the baguetteBox gallery you can add this to your html markup and you have caption in the lightbox and in the gallery

<div class="col item position-relative">
	<a href="image.webp" 
		data-caption="Title of the photo">
		<img class="img-fluid" src=image.webp">
		<p class="text-dark-emphasis position-absolute bottom-0 start-50 translate-middle-x">Title of the photo</p>
	</a>
</div>
4

Thanks, but it doesn’t work in the lightbox, you can see it → https://djl.com.es/

can you help me to make it look like the one in the image? i want it to look like this, both in the gallery and in the lightbox.

foto (1)
foto (1)563Ă—1000 162 KB

5

@Languedok

You can try with this CSS

#baguetteBox-overlay .full-image {
  height: 90%;
  top: 50px;
}

.full-image img {
  border-radius: 1rem;
}

#baguetteBox-overlay .full-image figcaption {
  width: 200px;
  border-radius: 1rem;
  left: calc(50% - 100px);
  margin-bottom: 10px;
  padding: 0.5rem;
}
1 Like
6

@Languedok

Here is an example

1 Like
7

If you mean add text over the image, this is how I do it.

  1. In the overview section on the left side, add a “div” to the column which contains the link and image from the lightbox gallery.

  2. Then add a paragraph or a heading within the div.

  3. Select the div and head over to the “appearance” tab on the right-hand side and scroll down to “positioning” and change position to “absolute”.

  4. Then select the column that you added the div to and go to “options” and scroll down to “flexbox” and use the icons at the very top to position the text.

  5. If you need to add a semi-transparent background to the text, select the div, go to “appearance” and “background” and select the colour. Under the “select” option on the colour wheel choose the 2nd slider to make the background transparent. If you need to add any margin or padding, use those options under appearance.

Edit: I should note this only works on the thumbnails, not on the larger linked image.

1 Like
8

Thanks to all, Now it works!!!