Magnific Popup - Add Caption to Images

My theme uses Magnific Popup as follows in theme.js

  /* add lightbox for blog galleries */
  $(".gallery a[href$='.jpg'],.gallery a[href$='.jpeg'],.featured-item a[href$='.jpeg'],.featured-item a[href$='.gif'],.featured-item a[href$='.jpg'], .page-featured-item .slider a[href$='.jpg'], .page-featured-item a[href$='.jpg'],.page-featured-item .slider a[href$='.jpeg'], .page-featured-item a[href$='.jpeg'], .gallery a[href$='.png'], .gallery a[href$='.jpeg'], .gallery a[href$='.gif']").parent().magnificPopup({
    delegate: 'a',
    type: 'image',
    tLoading: 'div class="loading dark"i/ii/ii/ii/i/div',
    mainClass: 'my-mfp-zoom-in',
    gallery: {
      enabled: true,
      navigateByImgClick: true,
      preload: [0,1] // Will preload 0 - before current, and 1 after the current image
    },
    image: {
      tError: 'a href="%url%"The image #%curr%/a could not be loaded.',
      verticalFit: false
    }
  }); 

I would like to modify this to add the caption of each image in the Wordpress Gallery. I know I should be using the selector.

image: {
            titleSrc: 
}

Also I don't want to edit this code directly as it's part of a theme. Could I use a function or perhaps the footer to append my changes?

Topic theme-development themes Wordpress

Category Web


Assuming you have entered some text into the Caption field of the Media Gallery, you can use a custom callback for titleSrc:

titleSrc: function(item) {
    return item.el.parents('.gallery-item').find('.gallery-caption').text();
}

Here it is integrated with the code you provided:

/* add lightbox for blog galleries */
$(".gallery a[href$='.jpg'],.gallery a[href$='.jpeg'],.featured-item a[href$='.jpeg'],.featured-item a[href$='.gif'],.featured-item a[href$='.jpg'], .page-featured-item .slider a[href$='.jpg'], .page-featured-item a[href$='.jpg'],.page-featured-item .slider a[href$='.jpeg'], .page-featured-item a[href$='.jpeg'], .gallery a[href$='.png'], .gallery a[href$='.jpeg'], .gallery a[href$='.gif']").parent().magnificPopup({
    delegate: 'a',
    type: 'image',
    tLoading: '<div class="loading dark"><i></i><i></i><i></i><i></i></div>',
    mainClass: 'my-mfp-zoom-in',
    gallery: {
        enabled: true,
        navigateByImgClick: true,
        preload: [0,1] // Will preload 0 - before current, and 1 after the current image
    },
    image: {
        tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
        verticalFit: false,
        titleSrc: function(item) {
            return item.el.parents('.gallery-item').find('.gallery-caption').text();
        }
    }
});

Also I don't want to edit this code directly as it's part of a theme. Could I use a function or perhaps the footer to append my changes?

You can use a child theme with its own theme.js that overrides your theme's theme.js. See https://codex.wordpress.org/Child_Themes


You have to add the title attribute to the <a href> code surrounding the images that the Magnific Popup effect is being applied to.

The new code should look like this:

$thumb_img = get_post( get_post_thumbnail_id() ); // Get post by ID
$excerpt = $thumb_img->post_excerpt; // Display Caption
<a href="{current_url_here}" title="<?php echo $excerpt; ?>" />

It would be a lot easier for me to help you out if you could paste some sample code in your question :)

Hope this helps.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.