[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 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #23087
    Daniel
    Participant

    Hi!

    Is it possible to add the title of the post below the image in lightbox?

    #23188
    Tom
    Keymaster

    Hi there,

    Our lightbox feature using Featherlight: https://github.com/noelboss/featherlight

    They provide this solution: https://github.com/noelboss/featherlight/wiki/Gallery:-showing-a-caption

    Not sure if it will work – but worth a shot?

    Let me know 🙂

    #23410
    Daniel
    Participant

    Thanks for your help Tom!

    Unfortunately the solution you offered me did not work.

    http://lagui.es/disenos-puertas/

    I understand that this kind of problems are beyond the scope of WPShow Posts.

    I was simply asking if there would be any simple solution to apply, but there has been no luck.

    It’s really not essential to display the name next to the images in the lightbox.

    Thanks anyway.

    #23530
    Tom
    Keymaster

    Once we update this plugin as a block, we’ll be going with a different lightbox solution. I’ll be sure to implement one that has this ability built in 🙂

    #23706
    Daniel
    Participant

    I hope to get a chance to try out that new version as soon as possible.
    Regards!

    #23726
    Vlidi
    Participant

    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!

    • This reply was modified 2 months, 4 weeks ago by Vlidi.
    #23730
    Vlidi
    Participant

    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!

    • This reply was modified 2 months, 4 weeks ago by Vlidi.
    #23782
    Tom
    Keymaster

    Hi there,

    That code is javascript, so it needs to be added in a .js file, or as a snippet like this:

    add_action( 'wp_footer', function() {
        ?>
        <script>Put it in here</script>
        <?php
    } );
    #25920
    Vlidi
    Participant

    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!

    • This reply was modified 1 month ago by Vlidi.
    #25924
    elvin
    Moderator

    You can try this code:

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

    Note: This will only work if your images have alt texts. If its empty, nothing will display.

    Also, you may have to do a bit of CSS to achieve the desired result as because w/o it, the caption will appear below the image.

    #25933
    Vlidi
    Participant

    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!

    • This reply was modified 1 month ago by Vlidi.
    #25937
    Vlidi
    Participant

    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.

    #25964
    elvin
    Moderator

    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.

    #25976
    Vlidi
    Participant

    Thank you very much, works great 🙂

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

    WPSP is simply great, very enthusiastic about the block editor version.
    And thanks once again for the fantastic support!

    #26021
    elvin
    Moderator

    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?

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