Picture titles for lightbox shortcode

[FlywebMedia]

http://nbw.f3b.myftpupload.com/gemstone-2/
this is my gallery link ^

how can i add titles to each picture in the lightbox gallery (in the code editor short code) that pops up? (so i can list the names of each stone when the user clicks on the gallery image.)
Thanks

[Prasant]

Hello @FlywebMedia,

Thanks for writing in!

To have better flexibility I suggest you to use Envira Gallery as that as title and caption feature built into the plugin and does not require extra shortcode or custom development.

You can install Envira Gallery from Pro > Validation > Extensions. Here’s some resources that you can refer:

Envira Gallery | Themeco Docs

How to display titles below the thumbnails on your gallery

How To Display The Title Over The Envira Gallery Image

Thanks.

[FlywebMedia]

I don’t want to use the envira gallery, for a few reasons
this is my code below. Can you please let me know where i can insert a title if possible??
thank you Prasant!

[block_grid type=“two-up”] [block_grid_item] [image class=“my-portfolio” src="/wp-content/uploads/2019/06/Apple-Martini-2710.jpg" alt=“Example” type=“thumbnail” link=“true” href="/wp-content/uploads/2019/06/Apple-Martini-2710.jpg" title=“Martini Stone”] [/block_grid_item] [block_grid_item] [image class=“my-portfolio” src="/wp-content/uploads/2019/06/Atlantic-Salt-6270.jpg" alt=“Example” type=“thumbnail” link=“true” href="/wp-content/uploads/2019/06/Atlantic-Salt-6270.jpg" title=“Atlantic Salt”] [/block_grid_item] [block_grid_item] [image class=“my-portfolio” src="/wp-content/uploads/2019/06/Apple-Martini-2710.jpg" alt=“Example” type=“thumbnail” link=“true” href="/wp-content/uploads/2019/06/Apple-Martini-2710.jpg" title=“Example Image”] [/block_grid_item] [block_grid_item] [image class=“my-portfolio” src="/wp-content/uploads/2019/06/Atlantic-Salt-6270.jpg" alt=“Example” type=“thumbnail” link=“true” href="/wp-content/uploads/2019/06/Atlantic-Salt-6270.jpg" title=“Example Image”] [/block_grid_item] [/block_grid]

[lightbox selector=".my-portfolio" deeplink=“true” opacity=“0.875” prev_scale=“0.75” prev_opacity=“0.75” next_scale=“0.75” next_opacity=“0.75” orientation=“horizontal” thumbnails=“true”]

[nabeel]

Hey @FlywebMedia,

The lightbox shortcode does not support the titles for images currently. This would require custom scripting in order to achieve this. Try adding the following code in the Theme Options > JS:

jQuery(document).ready(function($){
	$('.my-portfolio.x-img-link').each(function(){
		var title = $(this).attr('title');
		$(this).append('<h3 class="lightbox-image-title">'+ title + '</h3>')
	});
});

Then add the following code in the Theme Options > CSS:

.lightbox-image-title {
    margin: 0;
    font-size: 20px;
    text-align: center;
}

The above script extracts the title from your image shortcode e.g title=“Martini Stone” and append it to the lightbox item whereas my-portfolio is the class assigned to your lightbox images.

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[FlywebMedia]

Ok very nice. But this code makes it so that the title shows up under the image when it is static on the page, what i wanted / was looking for was the image title to show up in the gallery when you are scrolling through after the image has been clicked on (when all the images are full screen / post click)

Let me know if this is possible thanks Nabeel

[jade]

Hi @FlywebMedia,

It would be best to get in touch with a developer for this as providing custom codes goes beyond the scope of our support. The code that @Nabeel provided should hopefully get you started with the customization you are aiming for.

Thank you.