[Resolved] Add title to image lightbox

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Add title to image lightbox

Tagged: 

Viewing 7 posts - 16 through 22 (of 22 total)
  • Author
    Posts
  • #26036
    Vlidi
    Participant

    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!

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

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

    • This reply was modified 7 months, 3 weeks ago by Vlidi.
    #26083
    elvin
    Moderator

    I’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%);
    }
    #26086
    Vlidi
    Participant

    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:

    Screen Shot 2021-01-29 at 13.37.28.png

    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.
    #26189
    elvin
    Moderator

    Try 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.

    #26221
    Vlidi
    Participant

    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.
    #26253
    elvin
    Moderator

    Nice one! Thank you for compiling it in one post. Glad you got it sorted. 🙂

Viewing 7 posts - 16 through 22 (of 22 total)
  • You must be logged in to reply to this topic.