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?