Image captions in lightbox?

Beaver Builder
1

Please help… I really like the hover effect for photo captions. However, I can’t seem to find out how to make it appear when the image is shown in the light box. The reason I need this is that I’m showing small images of products and my captions are long, so it would be nice to have them when the image shows up bigger.
Charles

2

Hi Charles! I am afraid our built-in light box doesn’t have that functionality. But, you could experiment with another light box plugin for WordPress. Off the top of my head, I don’t know any that display the caption, but there’s got to be one. Doing a quick Google search turned up this lightbox plugin:

https://wordpress.org/plugins/simple-lightbox/

I’d start there. Let us know if it works or if you find a better plugin/solution.

PS - if you have second, please feel free to add this as a feature request on our user voice page: https://wpbeaverbuilder.uservoice.com/forums/270594-general

3

Robby, is there any reason you’re not using the title attribute of the link around the image for the caption? I’ve tried it and it works for me: captions show in the lightbox.

thanks,
Brigitte

4

Hi Brigitte! Are you using the title attribute so the caption will show up when the user hovers? That’s a perfectly good solution too!

When possible, though, I prefer custom “tool tips” as opposed to the native browser ones. They’re easier to style and you have more control over when they’re shown.

5

Hi Robby,

Thanks for your response.

I’m using the title attribute so that I can get a caption to show in the lightbox, not for tooltips when the user hovers.

Unfortunately your gallery solution for displaying the captions on hover isn’t ideal if one wants to create a gallery of small thumbnails that load the lightbox on click. The on-hover caption on a small image gets cut short with an ellipsis (for obvious reasons!), but to me that implies that clicking on the thumbnail will allow me to see the full caption (along with a larger version of the image). However, in your photo module captions are not loaded in the lightbox. I’ve overridden this module to include the title attribute in the link.

Personally, I’d prefer it if the lightbox used a data attribute to retrieve the image caption.

thanks,
Brigitte

6

Hi Brigitte

May I ask you how did you override the module so the title would appear in lightbox.? I’m having the issue!!

Mazin

7

Hi Mazin,

Unfortunately I am travelling at present with limited internet access so not able to paste in my solution. But if it’s any help, I had to override the Photo module. Specifically, I edited front end.php to add a title attribute containing the image caption to the link that wraps around the image. I hope that helps.

regards,
Brigitte

8

Hi Brigitte

Is there any possibility that you might past the title attribute that you used or the overridden Photo module?

Thanks

9

Hi Mazin,

I created a custom photo module, with the following code in frontend.php:

<?php

$photo  = $module->get_data();
$src    = $module->get_src();
$link   = $module->get_link();
$alt    = $module->get_alt();
$attrs  = $module->get_attributes();

?>
<div class="fl-photo<?php if ( ! empty( $settings->crop ) ) echo ' fl-photo-crop-' . $settings->crop ; ?> fl-photo-align-<?php echo $settings->align; ?>" itemscope itemtype="http://schema.org/ImageObject">
	<div class="fl-photo-content">
		<?php if(!empty($link)) : ?>
		<a href="<?php echo $link; ?>" target="<?php echo $settings->link_target; ?>" itemprop="url" title="<?php echo $photo->caption ?>">
		<?php endif; ?>
		<img class="fl-photo-img" src="<?php echo $src; ?>" alt="<?php echo $alt; ?>" itemprop="image" <?php echo $attrs; ?> />
		<?php if(!empty($link)) : ?><span></span>
		</a>
		<?php endif; ?>    
		<?php if($photo && !empty($photo->caption) && 'hover' == $settings->show_caption) : ?>
		<div class="fl-photo-caption fl-photo-caption-hover" itemprop="caption"><?php echo $photo->caption; ?></div>
		<?php endif; ?>
	</div>
	<?php if($photo && !empty($photo->caption) && 'below' == $settings->show_caption) : ?>
	<div class="fl-photo-caption fl-photo-caption-below" itemprop="caption"><?php echo $photo->caption; ?></div>
	<?php endif; ?>
</div>

You’ll see on line 13, I’ve added the following title attribute to the containing link element:

title="<?php echo $photo->caption ?>"

I hope that helps. It’s a while ago now!

kind regards,
Brigitte

10

Thank you so much Brigitte… You are an angle :slight_smile:

11

In case this might be useful, I used the Envira Light plugin to get the captions. Put the shortcode into an html section. Easy, and quick to do. First choice was Foo Gallery with Foo Lightbox, but there was some sort of conflict that prevented display of the forward - back arrows.

12

Hello Mikekl

You’re totally right. I just got the plugin, but not the light one, I wanted more control for the galleries, so I downloaded the premium gold. I’m very happy with it.

Thank you for sharing you thought.

Mazin