Home › Forums › Pro Support › Add title to image lightbox
Tagged: lightbox
- This topic has 21 replies, 4 voices, and was last updated 1 year, 12 months ago by
elvin.
-
AuthorPosts
-
January 28, 2021 at 4:19 am #26036
Vlidi
ParticipantHey 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!
January 28, 2021 at 4:33 am #26041Vlidi
Participant[For some reason I could not delete this doubled post, only edit.]
January 29, 2021 at 4:26 am #26083elvin
ModeratorI’m still not sure I understand what you mean. You seem to be trying to turn the image lightbox into a carousel.
I don’t think that’s possible with how WPSP’s script are written.
And to be honest, this may require scripts which is out of the plugin support’s scope.
As for putting the caption on the image, it should be possible by inserting it with
wpsp_inside_image_container
hook.Example: (using alt as caption.)
Add this PHP:
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; });
Then add this CSS:
.wp-show-posts-image{ position: relative; } .wp-show-posts-image .wpsp-img-caption{ position: absolute; bottom: 2%; left: 50%; transform: translateX(-50%); }
January 29, 2021 at 5:54 am #26086Vlidi
ParticipantHey 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-lightboxAnd 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!
January 31, 2021 at 8:37 pm #26189elvin
ModeratorTry this instead:
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; });
I simply changed this
$caption .= .$image_alt;
into this:$caption .= $image_alt;
so the stray.
is removed.You then add this CSS:
.wpsp-img-caption { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
Here’s how it would look: https://share.getcloudapp.com/jkueoAgo
You can see here that the alt text is in the image.
Try it again with this fix and let us know how it goes.
February 1, 2021 at 7:06 am #26221Vlidi
ParticipantHi 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!
February 1, 2021 at 10:23 pm #26253elvin
ModeratorNice one! Thank you for compiling it in one post. Glad you got it sorted. 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.