0

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']:

     <?php 
       $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();?>

Javascript:

    $('.video').Lightbox({
      type: 'iframe'

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

2 Answers 2

Reset to default
1

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>' +
Improve this answer
4
  • You should use DOM element construction, joining HTML together in strings is a security hazard Commented May 17, 2016 at 16:12
  • Or you could assemble the whole string in PHP, so you don't need to concatenate in the script Commented May 17, 2016 at 16:37
  • So, would it be best for me to use a function inside wordpress' functions.php? Commented May 18, 2016 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. Commented May 18, 2016 at 5:17
0

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!

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.