[Resolved] Add title to image lightbox

P.S.
I am aware that you posted this fix, but I am doing something wrong, as however I replace $ instances, the Code Snippets complains.
And this is where my PHP mastery ends :-/

Thanks!

Hey Tom, thank you!

After a long while of juggling things around – and breaking Code Snippets 🙂 – I finally think I have it assembled properly.

Unfortunately, still no captions.

Can you confirm that the code is OK?

Looks like this now:

add_action( 'wp_footer', function() {
    ?>
	<script>
		jQuery.featherlightGallery.prototype.afterContent = function() {
			var caption = this.$currentTarget.find('img').attr('alt');
			this.$instance.find('.caption').remove();
			jQuery('<div class="caption">').text(caption).appendTo(this.$instance.find('.featherlight-content'));
		};
	</script>
    <?php
} );

…and if the code is good, does it mean that there is no way to have captions at all?

Thanks!

Hi Elvin, thank you!

Unfortunately, still no captions.

(I made sure to have something entered in Alt, Description and Caption fields, just in case.)

In addition, the console produces this error:

Uncaught TypeError: Cannot read property 'prototype' of undefined

…pointing to this line:

jQuery.featherlightGallery.prototype.afterContent = function() {

Maybe I messed something up, so here’s the full code I used:

add_action( 'wp_footer', function() {
    ?>
	<script>
		jQuery( document ).ready( function( $ ) {
    $.featherlightGallery.prototype.afterContent = function() {
        var caption = this.$currentTarget.find('img').attr('alt');
        this.$instance.find('.caption').remove();
        $('<div class="caption">').text(caption).appendTo(this.$instance.find('.featherlight-content'));
    };
} );
	</script>
    <?php
} );

Any idea?

Thanks!

Try this:

add_action( 'wp_footer', function () { ?>
<script>
jQuery( document ).ready( function( $ ) {
    $.featherlightGallery.prototype.afterContent = function() {
        var caption = this.$currentTarget.find('img').attr('alt');
        this.$instance.find('.caption').remove();
        $('<div class="caption">').text(caption).appendTo(this.$instance.find('.featherlight-content'));
    };
} );
</script>
<?php } );

I fixed the missing syntaxes. Here’s an actual demo of it working: WPSP DEMO

You can see the caption in red when you click on the image. Some image don’t have alt text so nothing displays on them.

My last question: any way to display the captions while in Carousel mode, before we enter Lightbox?

I’m not exactly sure I get what you mean. Do you have a reference site you’d like to replicate?