Show caption in iframe lightbox

Hey Daniel,

Thank you for opening another thread.

Have you tried directly adding the alt or title attribute to the element with the ?iframe=true link?

<a class="content1 mfp-iframe lightbox-added" href="https://ipg-messe.noops.de/wp-content/uploads/2025/05/01_experience_overview_screen_01-scaled.jpg?iframe=true">
      <span class="dashicons dashicons-playlist-video"></span>
</a>

Replace it with:

<a alt="CUSTOM ALT HERE" title="CUSTOM TITLE HERE" class="content1 mfp-iframe lightbox-added" href="https://xxxxxx.de/wp-content/uploads/xxx/xxxxx/xxxxxjpg?iframe=true">

      <span class="dashicons dashicons-playlist-video"></span>

    </a>

Best regards,
Ismael

Hi,

Thank you for the update. We deleted the URL from the previous post.

Try to replace the html with:

<a 
    alt="CUSTOM ALT HERE" 
    title="CUSTOM TITLE HERE" 
    class="content1 inline_popup" 
    href="IFRAME URL HERE"
>
    <span class="dashicons dashicons-playlist-video"></span>
</a>

Add this code in the functions.php file:

function av_inline_popup_enabler() { ?>
    <script>
    (function($){
        $(document).ready(function() {
            $('.inline_popup').magnificPopup({
                type: 'iframe',
                midClick: true,
                callbacks: {
                    open: function() {
                        var title = this.st.el.attr('title') || this.st.el.attr('alt') || '';
                        if (title) {
                            var $caption = $('<div class="mfp-title" style="text-align:center; padding:10px 0;">' + title + '</div>');
                            this.contentContainer.append($caption);
                        }
                    }
                }
            });
        });
    })(jQuery);
    </script>
<?php }
add_action('wp_footer', 'av_inline_popup_enabler', 9999);

Then insert this css code in the Quick CSS field:

div .mfp-title {
  z-index: 9999;
  position: relative;
  color: #ffffff;
  bottom: -50px;
}

View post on imgur.com

Best regards,
Ismael

Hi,

We just noticed that you’re trying to load jpg images. What happens when you remove the iframe=true parameter completely? Make sure that link contains the “lightbox” class name.

<div class="isotope">
  <a alt="CUSTOM ALT HERE" title="CUSTOM TITLE HERE" class="lightbox" href="xxx.jpg"> 01 </a>
  <a alt="CUSTOM ALT HERE" title="CUSTOM TITLE HERE" class="lightbox" href="xxx.jpg"> 02 </a></div>

The title or alt attribute should automatically display without the custom script.

View post on imgur.com

Best regards,
Ismael

Hi,

Please replace the script with this:

function av_inline_popup_enabler() { ?>
    <script>
    (function($){
        $(document).ready(function() {
            $('[class*="group-"]').each(function() {
                $(this).magnificPopup({
                    delegate: 'a.inline_popup',
                    type: 'image',
                    gallery: { enabled: true },
                    midClick: true,
                    callbacks: {
                        elementParse: function(item) {
                            var href = item.el.attr('href');
                            if (href.match(/\.(jpg|jpeg|png|gif|webp)(\?.*)?$/i)) {
                                item.type = 'image';
                            } else {
                                item.type = 'iframe';
                            }
                        },
                        open: function() {
                            var title = this.st.el.attr('title') || this.st.el.attr('alt') || '';
                            if (title) {
                                var $caption = $('<div class="mfp-title" style="text-align:center; padding:10px 0;">' + title + '</div>');
                                this.contentContainer.append($caption);
                            }
                        }
                    }
                });
            });
        });
    })(jQuery);
    </script>
<?php }
add_action('wp_footer', 'av_inline_popup_enabler', 9999);

This will group the items based on the parent container (group-1, group-2) and also parse the element format and return the correct type, so you don’t need to add the iframe parameter to images.

<div class="group-1">
  <a alt="CUSTOM ALT HERE" title="CUSTOM TITLE HERE" class="inline_popup" href="image.jpeg" title="Image 1">Image 1</a>
  <a alt="CUSTOM ALT HERE" title="CUSTOM TITLE HERE" class="inline_popup" href="video.mp4?iframe=true" title="Video 1">Image 2</a></div>
<div class="group-2">
  <a alt="CUSTOM ALT HERE" title="CUSTOM TITLE HERE" class="inline_popup" href="image.png" title="Image">Image</a></div>

Best regards,
Ismael

Hi,

Looks like it’s not possible to display a title when displaying an iframe or video in the magnific popup or lightbox. We tried the solution in the following thread, but it is still not working.

— https://stackoverflow.com/questions/17612258/title-for-iframe-video-in-magnific-popup

Best regards,
Ismael

Hi,

That’s great news! Glad to know you managed to resolve the issue. Please don’t hesitate to start a new thread if you have more questions about the theme.

Have a nice day.

Best regards,
Ismael