Lightbox image name

Beaver Builder
1

I have a image galley and I would like to show the image name in the lightbox effect, is this possible?

2

Hey Ishobox,

Sorry to say but that won’t be possible with BB out of the box. If you’re good with PHP, you could try implementing it yourself. We’re using MagnificPopup for the lightbox. You can find their documentation on the link below.
http://dimsemenov.com/plugins/magnific-popup/documentation.html

To override the builtin modules, you can check the link below.
http://forum.wpbeaverbuilder.com/custom-module-documentation/#override-built-in

I also found the article below which discusses what needs to be done to show the caption. Take note though we haven’t tested this yet.
http://insightandinsanity.com/use-magnific-popup-with-wordpress-now/

Lastly, we already have a feature request for the same so you can vote for it. :slight_smile:
https://wpbeaverbuilder.uservoice.com/forums/270594-general/suggestions/7635195-photo-captions-in-the-light-box

Ben

3

Hello ishobox

I had the same issue and I had to modify the frontend.php file

public_html/wp-content/plugins/bb-plugin/modules/photo/includes/frontend.php

I’ll be more than happy to email you the file if you like, it’s working very nicely so far.

Mazin

4

[Content Hidden]

5

Hey Ishobox,

Sorry to say but I don’t think he will be able to see the private reply.

Mazin,

Thanks for jumping in, we really appreciate it! Can you share the code here instead? Just wrap them around backticks(the code button above) so they retain their format. Or maybe dropbox the file so Ishobox can see? :slight_smile:

Ben

6

Ups! Sorry Mazin, Ben is right, I did not realize that you could not see the message to mark it as private. Can you do what Ben says? Put the code between backticks or dropbox the file.

Thanks.

7

Here’s the file


<?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>
8

Thank you very much Mazin, it works like a charm.

9

Hey Mazin,

Thanks for sharing the code, we really appreciate it!

Ishobox,

Thanks for taking the time to inform us it works!

You guys have fun! :slight_smile:

Ben

10

Can I use this to show the image caption instead of the image name in the lightbox?

11

Hey Jacks,

I just checked the code provided by Mazin above and it does get the caption instead of the image name in the lightbox. Can you give it a shot and let us know how it goes?

Ben