[Resolved] Add title to image lightbox

[For some reason I could not delete this doubled post, only edit.]

• This reply was modified 7 months, 3 weeks ago by Vlidi.

Hey Elvin,

actually, it is the other way around – I am trying to have a Carousel gallery with images, which turns into a Lightbox when you click on it.

I am very sorry if this is considered odd or unusual request.
There are plugins that do just that and I wanted to see if WPSP can be accommodated to have the similar output as e.g. here:
https://wordpress.org/plugins/continuous-image-carousel-with-lightbox

…or here:
https://shapedplugin.com/how-to-create-wordpress-image-carousel-with-lightbox

And the excellent WPSP can do it – I am now trying to add image captions for both states (Carousel & Lightbox).

The Lightbox part is solved in the thread above (when the Gallery is activated) – thank you!
I wanted to see if it is possible to have the captions as well when in the Carousel (preview) mode.

Unfortunately, the solution doesn’t work as I get the code printed as text instead of captions above the images. It is inserted via custom Hook to wpsp_inside_image_container.

There was a syntax error reported on this line:

$caption .= .$image_alt;

The output looks like this:

But please we can stop here if you feel this falls outside the scope of support.
The GPP / WPSP support fantastic, you guys are simply great, and the last thing I want to do is to misuse it in any way.

Thank you for all the help!

• This reply was modified 7 months, 3 weeks ago by Vlidi.

Hi Elvin, and thank you – this works great!

So whoever may need it, the complete solution for using WPSP as Lightbox gallery WITH CAPTIONS:

1. For the Gallery preview mode (e.g. thumbnails in Carousel):

– Use this code (child theme / Code Snippets):

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 } );

– Style with this CSS:

.caption {
	background-color: #ffffff;
	color: #aaaaaa;
	padding: 5px;
	font-size: 20px;
}

2. For the Gallery view mode in Lightbox;

– Use this code (child theme / Code Snippets):

add_action('wpsp_inside_image_container',function(){

$image_id = get_post_thumbnail_id( get_the_ID(), 'full' );
$image_alt = get_post_meta($image_id, '_wp_attachment_image_alt', TRUE);

$caption = '<div class="wpsp-img-caption">';
$caption .= $image_alt;
$caption .= '</div>';

echo $caption;
});

– Style with this CSS:

.wp-show-posts-image{
position: relative;
}
.wp-show-posts-image .wpsp-img-caption{
position: absolute;
bottom: 2%;
left: 50%;
transform: translateX(-50%);
}

***

This works for WPSP 1.1.3 and WPSP Pro 1.0.

Thank you once again for the fantastic support!

• This reply was modified 7 months, 2 weeks ago by Vlidi.