Add caption in lightbox under image in masonry gallery

This is a bit more than you like to have but it shows you how you can have influence on different settings using Enfold specific classes – and even you can change the markup for lightbox on that
my example page is on id: 36548 so if you want to have that globally – get rid of if-clause
look to this example code:

function popup_masonry_gallery() { 
if(is_page(36548)){
?>
<script type="text/javascript">
(function($){
$(window).load(function(){  
    $('a.av-masonry-entry.lightbox-added').magnificPopup({
    type: 'image',
		image: {
        titleSrc: false,
        markup: '<div class="mfp-figure">'+
                  '<div class="mfp-close"></div>'+
                  '<div class="mfp-top-bar"></div>'+
                  '<div class="mfp-img"></div>'+
                  '<div class="mfp-bottom-bar">'+
                    '<div class="mfp-title"></div>'+
                    '<div class="mfp-counter"></div>'+
                  '</div>'+
                '</div>',
    },
    mainClass:          'avia-popup mfp-zoom-in mfp-image-loaded',
    closeOnContentClick:  false,
    midClick:         true,

    gallery: {
      enabled:      true
    },

    callbacks: {
		markupParse: function (template, values, item) {
			values.title = item.el.find('img').attr('alt') + '<br>' + item.el.closest('.av-masonry-entry').find('.av-masonry-entry-content').text();
		},

		// this - is Magnific Popup object.
        change: function() {
            $(this.content)
                .find('.mfp-top-bar')
                .html(
                    '<h2>' +
                        $(this.currItem.el).attr('title') +
                    '</h2>'
                );
        },
      	buildControls: function() {
	        // re-appends controls inside the main container
	        this.arrowLeft.appendTo(this.contentContainer);
	        this.arrowRight.appendTo(this.contentContainer);
      	},
    },
  }); 
  // close the iframe window
  $(document).on('click', '.popup-modal-dismiss', function (e) { 
    $.magnificPopup.close();
  });
});
})(jQuery);
</script>
<?php }}
add_action('wp_footer', 'popup_masonry_gallery');

first i get my selector – as on enfold it is the class lightbox-added
then i declare a new markup for that popup with f.e. a top-bar
on the callbacks i set the mfp-title to the image alt attribute and in the second line i look for the enfold description place – and get the text from: av-masonry-entry-content
in the new top-bar i place the img title as mfp-title !

see result: https://webers-testseite.de/lightboxes/

click the first image – you will see where the texts comes from in that new markup

Important: The captions had to be shown on that masonry in the enfold options dialog – otherwise they are not in the markup.
so if you do not like to have the visible set the figcaption to display none.

.mfp-top-bar h2 {
    color: #fff;
    font-weight: normal;
}

.page-id-36548 .av-inner-masonry-content {
    display: none;
}

All entries of the lightbox popups ( in Masonry and Gallery ) get their content from image attributes. These Attributes comes from Media Library – so they are globally set. If this should be a usefull feature it has to be a source input field that could be set individually on the inserted images.
F.e:
This input field may only be set for this image in this particular gallery.

On image ALB we can create an additional Input Field on customising the image.php a bit. But for gallery or masonry i did not find a way to do that.

This could be used to have an individual link in the lightbox with given link-target.

But that is a lot of customisation …
On that last image you can see how i prepared the image.php for that. If there is a lightbox link choosed – the additional input-field is shown and will end in:

Thank you Guenni007! Very Innovative. I think it’s beyond my coding capacity plus I just want a normal clickable link. Much appreciated.

well what i did now:
give a custom-class to that masonry alb element: lightbox-with-description ( you can adjust this to a more easier class )
Fill out the description fields –
I decided to create an own markup for mfp – it is easier to address then with class : mfp-description in the bottom-bar
Adjust the page id to yours or get rid of that if clause ( think of to delete one of the last curly brackets then on the end )
Choose on Masonry ALB to show both Title and Description !!! ( i set the description to display: none then to have it only on lightbox )
https://webers-testseite.de/masonry/

function popup_masonry_with_description() { 
if(is_page(32904)){
?>
<script type="text/javascript">
(function($){
$(window).load(function(){  
    $('.av-masonry.lightbox-with-description a.av-masonry-entry.lightbox-added').magnificPopup({
    type: 'image',
    image: {
      markup: '<div class="mfp-figure">'+
        '<div class="mfp-close"></div>'+
        '<div class="mfp-img"></div>'+
        '<div class="mfp-bottom-bar">'+
          '<div class="mfp-title"></div>'+
          '<div class="mfp-description"></div>'+
          '<div class="mfp-counter"></div>'+
        '</div>'+
      '</div>',
    },
    mainClass: 'avia-popup mfp-zoom-in mfp-image-loaded',
    closeOnContentClick: false,
    midClick: true,
    gallery: { enabled: true },
    callbacks: {
        change: function() {
            $(this.content).find('.mfp-description').html('<p>'+$(this.currItem.el).find('.av-masonry-entry-content').html()+'</p>');
        },
    },
  }); 
});
})(jQuery);
</script>
<?php 
}
}
add_action('wp_footer', 'popup_masonry_with_description');

some css for quick css:

.page-id-32904  .lightbox-with-description .av-masonry-entry-content.entry-content {
    display: none;
}
.page-id-32904 .mfp-description {
  color: #fff;
  width: 85%
}
.page-id-32904 div .mfp-title {
  font-size: 24px;
}
.page-id-32904 .mfp-description p {
    line-height: 24px;
    margin: 0 !important;
}

by the way – you can place the bottom bar inside the Image – because if you got a lot of text it will sometimes be out of the viewport.
so look to the example-page above again! This is css for that:

.page-id-32904 .mfp-bottom-bar {
    top: initial;
    bottom: 40px;
    width: calc(100% - 20px);
    margin: 10px;
    background: rgba(0, 0, 0, 0.4);
}