Adding a caption with ips.ui.lightbox

[Meddysong]

Is there any scope for adding a caption using with ips.ui.lightbox?

I'm setting up some images detailing how to find our headquarters and I like the idea of it being with lightbox, so that you can scroll through them like ticking off instructions in order.

In some cases I can add text to the image itself:

But in other instances the text would be too lengthy to be visible like this on mobile. I'd rather be able to add a caption instead but I'm not sure it's possible with the functionality.

Does anybody know whether it's possible and, if so, how would I do it?

[Meddysong]

Six months later and I'm still wrestling with this. How would I add a caption?

I know that I would have to style it with CSS; that's not the problem. But I have no idea how I would generate a caption. If part of my code looked like this:

 <a data-ipslightbox="" data-ipslightbox-group='example' href='//esperanto.org.uk/events/images/find-us/uphill-sign-up-close.jpg'><img src='https://upload.wikimedia.org/wikipedia/en/5/5e/WWE_Superstars_logo.png'></a> 

what would I need to add to generate a caption?

[Brian A.]

27 minutes ago, Meddysong said:

what would I need to add to generate a caption?

You can use attr() function to fetch the caption for each slideshow.

[Meddysong]

Could you show me how, please, Brian? I'm afraid your answer isn't telling me much. How would I amend the snippet of code I posted in order to do that?

[Brian A.]

1 minute ago, Meddysong said:

Could you show me how, please, Brian? I'm afraid your answer isn't telling me much. How would I amend the snippet of code I posted in order to do that?

Absolutely!

The markup of the code should look like this:

<a data-ipslightbox="" data-ipslightbox-group='example' data-caption='Caption here' href='//esperanto.org.uk/events/images/find-us/uphill-sign-up-close.jpg'>
  <img src='https://upload.wikimedia.org/wikipedia/en/5/5e/WWE_Superstars_logo.png'>
</a>

I just added data-caption so I can fetch it with attr().

Now, let's fetch it with CSS:

a::after {
  content: ""attr(data-caption)"";
  /* Properties styles here */
}

The selector is just an example so you can add your own by adding class.

[Meddysong]

Thank you for your help, Brian. There's always something new to learn!

There's a problem, however. That displays the caption on the basic page display. What I wanted was to display it when the lightbox is in use, ie when somebody clicks a thumbnail (which won't have a caption) and initiates the lightbox (which should have a caption). As we've done it here, there's a caption associated with the thumbnail but not with the lightbox once it's in use.

[Brian A.]

2 minutes ago, Meddysong said:

Thank you for your help, Brian. There's always something new to learn!

You're very welcome.

7 minutes ago, Meddysong said:

There's a problem, however. That displays the caption on the basic page display. What I wanted was to display it when the lightbox is in use, ie when somebody clicks a thumbnail (which won't have a caption) and initiates the lightbox (which should have a caption). As we've done it here, there's a caption associated with the thumbnail but not with the lightbox once it's in use.

You'll to use {{if}} logic to make it show if there's a caption. I don't know the code to do this, but my best bet to do this is by creating a database, which has fields so you can display it when there's a caption for the thumbnail.

[Meddysong]

Thank you for trying, Brian. This is just going to be a sequence of four images showing how to find our headquarters if you're driving, so a database would be overkill. (And if I were going to use a database, then I'd also use @opentype's beautiful Super Slider.)

 

I've already tried emulating it using the open source software it's based on but, alas, I can't get the click to function. So close!

Thank you for trying anyway. Have a lovely evening.

[Brian A.]

2 minutes ago, Meddysong said:

Thank you for trying, Brian. This is just going to be a sequence of four images showing how to find our headquarters if you're driving, so a database would be overkill. (And if I were going to use a database, then I'd also use @opentype's beautiful Super Slider.)

You're welcome. Oh, okay.

3 minutes ago, Meddysong said:

Thank you for trying anyway. Have a lovely evening.

I'm glad that I was a help to you. I will and you've a lovely evening too.