I have a video gallery, and all the titles are generated by php. They are coming from my Wordpress media library's attachment titles.

The lightbox for these videos, however, is customized in javascript. How can I put the php titles inside the iframe markup?

PHP - need to use $attachment_data['title']:

       $the_query = new WP_Query(array( 'post_type' => 'attachment','category_name' => 'video')); 
       while ( $the_query->have_posts() ) : $the_query->the_post();?>

     <?php $attachment_data = wp_prepare_attachment_for_js( $attachment->ID );
          echo'<div class="title"><h2>'.$attachment_data['title'].'</h2></div>';?>
             <?php endwhile; wp_reset_postdata();?>


      type: 'iframe'

      iframe: {
         markup: '<div class="lightbox_container">'+
                    '<iframe class="iframe" frameborder="0" allowfullscreen></iframe>'+
                    '<div class="title"> PHP GOES HERE </div>'+
callbacks: {
    markupParse: function(template, values, item) {
     values.title = item.el.attr('title');

First, don't echo your php, but assemble everything in a string, let's say $titlestring.

Next, make this string available for access by the javascript (the slug is the one you used to register the script):

$params = array (
    'titlestring'   =>  $titlestring,
wp_localize_script ('your-script-slug', 'IframeTitle', $params);

Finally, access the variable in the script:

'<div class="title">' + IframeTitle.titlestring + '</div>' +
  • You should use DOM element construction, joining HTML together in strings is a security hazard
    – Tom J Nowell
    May 17 '16 at 16:12
  • Or you could assemble the whole string in PHP, so you don't need to concatenate in the script
    – cjbj
    May 17 '16 at 16:37
  • So, would it be best for me to use a function inside wordpress' functions.php?
    – BlueHelmet
    May 18 '16 at 3:55
  • In this case, yes. It would be even beter if you don't load your lightbox in an iframe but in an overlay div.
    – cjbj
    May 18 '16 at 5:17

The developer included a solution for this, discussed here: https://stackoverflow.com/questions/17612258/title-for-iframe-video-in-magnific-popup

First I needed to include the title in my php:

echo'<figure><a class="video" title="'.$attachment_data['title'].'" href="'.get_post_meta($post->ID, 'credit_url', true).'">';

And then, I needed the callback:

callbacks: {
    markupParse: function(template, values, item) {
     values.title = item.el.attr('title');

Thank you for your help!

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.