Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #820446

    Hi there,
    im using a portfolio raster to feature some VIMEO – videos.
    The portfolioitems use a custom link to vimeo.
    On click a lightbox opens and the video starts to play – works perfect.

    Now my Question:
    How can i display some Information below the video?
    I already read some threads about image captions in lightboxes: (Purchase code hidden if logged out) /
    (and some others)
    But they are all about items from the media library, not about portfolio items.

    I think this issue has to do with the lightbox “magnific popup”

    When i inspect the rendered site in my brwoser there is no <figcaption> tag (or any child of it) in the DOM.

    Also i messed around a bit with the
    jquery.magnific-popup.js (also the minified version) But did not find the spot to put my monkey wrench on.

    Any suggestions where i can find the spot where the lightbox could display the caption?



    Hey JundG,
    Are you using this type of link to open your video in lightbox?

    Please include the url to the page in question so we can take a closer look and try to help.

    Best regards,


    Hi Mike,

    the site is now available at
    I build it locally on my computer, it took some time till going online – so sorry for the late reply.

    For opening the lightbox i use a standard portfolio raster with a vimeo-link.
    I am looking for a possibility to add a description under the videos in the lightbox.

    Where could i achive this ?

    Best Regards,


    Ok, i am starting to get my hands on it.

    The file to work with isthemes/enfold/js/aviapopup/jquery.magnific-popup.min.js
    wich i think is the minified version of
    My (already half fulfilled) plan is to copy the file to my childtheme and change
    it to show captions unter my iframe-vimeo-videos in the lightbox.
    The Lighbox used in enfold is called “magnific-popup”

    So here my steps

    1. copy the themes/enfold/js/aviapopup/jquery.magnific-popup.js to the childtheme (same folder structure) – so the changes are update-save

    2. Edit the functions.php in the childtheme to overwrite the js- file of the parent theme.Add:

    function change_aviapopup() {
       wp_dequeue_script( 'avia-popup' );
       wp_enqueue_script( 'avia-popup-child', get_stylesheet_directory_uri().'/js/aviapopup/jquery.magnific-popup.js', array('jquery'), 2, true );
    add_action( 'wp_enqueue_scripts', 'change_aviapopup', 100 );

    3. Edit thejquery.magnific-popup.js to add figcaption and other needed Elements to the DOM of the lightbox. These elements are normally shown when an image is shown in the lightbox – for iframes they are not. So we have to add them. For me it was in Line 1603:

    							'<div class="mfp-bottom-bar">'+
    								'<div class="mfp-title"></div>'+
    								'<div class="mfp-counter"></div>'+

    4. Make the script fill the new DOM-Objects with caption Text

    I’ll update this, when i am done. But it would be nice if you could help of cause.




    You are nailing moving forward with so many modifications – congratulations for that.

    Thank you

    Best regards,


    i finally wrote a little Jquery-Script inside the functions-php to display the captions.
    Disclaimer: This is a completely workaround and i think only compatible with my settng. If someone is going to use this he must make changes to make it work in his Enfold-Installation (classnames, lightboxfiles etc.)
    ok, here is the Code:

    // Lightbox mit excerpt
    // Replace the functions of jquery.magnific-popup.min.js with the ones in cildtheme/ jquery.magnific-popup.js
    function change_aviapopup() {
       wp_dequeue_script( 'avia-popup' );
       wp_enqueue_script( 'avia-popup-child', get_stylesheet_directory_uri().'/js/aviapopup/jquery.magnific-popup.js', array('jquery'), 2, true );
    add_action( 'wp_enqueue_scripts', 'change_aviapopup', 100 );
    //  lightbox captions
    function lightbox_captionizer(){
    // get input out of the DOM (should be better directly from the database  )
    jQuery( ".grid-image" ).click(function() {
    	kundenname = jQuery(this).next().find(".grid-entry-excerpt").html();
    	projektname = jQuery(this).next().find(".entry-content-header").html();
    jQuery( ".avia-slide-wrap" ).click(function() {
    	kundenname = jQuery(this).find(".avia-caption-title").html();
    	projektname = jQuery(this).find(".avia-caption-content").html();
    // put it in DOM of the (edited) lightbox
    function putDataInCaption() {
    	document.getElementById("captiontitle").innerHTML = kundenname+projektname;
    add_action('wp_footer', 'lightbox_captionizer');


    • This reply was modified 1 year, 1 month ago by  JundG.

    Hi Daniel,

    Thanks for sharing, it might be of use to someone else as well :-)

    Best regards,

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.