Support Forum

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!

Hey Elvin,

well, it should look sort of like this:

mdbootstrap.com/snippets/jquery/mdbootstrap/884716

amp.dev/documentation/examples/multimedia-animations/image_galleries_with_amp-carousel

…so alongside the captions visible once you launh Lightbox, I would like to have them also visible before, while in Carousel mode.

Thanks for looking into this!

I have adjusted the snippet a bit like so:

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

…but still the errors appear, and no captions.

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 Tom & WPSP team,

was just browsing the Forum to try to find the solution for captions, and I learn that the block version is coming, yey!

I would like to give the Featherlight code a chance in the meantime, and great that it promises to pull the content from the “alt” tab.

But it gives the following error and Code Snippets kindly refuse to proceed:

Fatal error on line 1:

syntax error, unexpected '.', expecting variable (T_VARIABLE) or '{' or '$'

I see the exact same code working on their demo.
How should I adapt it for GP?

Thanks!