0

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

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?

  • I don't think that's possible, my solution would involve you manually editing the code surrounding the images that are being used with the Magnific Popup JS plugin. – cristian.raiber Feb 16 '15 at 15:45
  • ok, let's hear it and I might modify the theme directly then.. – Joanna Mikalai Feb 16 '15 at 15:53
0

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.

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.