How to put php content into javascript markup?

Question

I have a video gallery, and all the titles are generated by php. The lightbox for these videos, however, is customized in javascript. How can I put the php titles inside the iframe markup?

See here:

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

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

EDIT

For reference, I need the attachment title below ($attachment_data['title']) in the javascript section mentioned (the markup).

  <?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'<figure><a class="video" href="'.get_post_meta($post->ID, 'credit_url', true).'">';
      echo''.the_post_thumbnail ('medium').'';
      echo'<div class="photo-title"><h2>'.$attachment_data['title'].'</h2></div></a></figure>';?>
   <?php 
   endwhile; 
   wp_reset_postdata();
  ?>  

Answer 1

Try this:

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

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

Notice the use of the <?= shorthand for echo. (read more about it)

Answer 2

There are a few ways to get javascript and PHP to interact. You could pull from the client using an ajax call. If you need to get a bunch of data asynchronously, that might be the thing. If you're going to have 20 copies of this iframe, you might consider using an AJAX call to pull a whole array of values/objects with JSON and then you can do with them whatever you'd like.

But... I suspect that you'll just use this iframe once per page. Rigging up some ajax for a once-per-page thing is probably a little overkill.

If you are putting your javascript right on your page, you could do as IzzEps suggested and simply echo your php values right into the iFrame. But I know most folks like to keep their javascript separate from their html content in a .js file. This makes it more maintainable. While not impossible, php most easily puts content onto .php files rather than others like js. I don't have any experience with getting a browser to use a php file for a script source.

What I've found easiest and cleanest is to write my javascript in my .js file as normal, then I'll add the variable(s) to my .php file as minimally as possible at the top in a script tag.

So, at the top of your page, you could do something like any of these:

<script>
    ObjectYoureWorkingWith.Title = '<?php echo $the_title(); ?>';
    var TitleObjectList = <?php echo json_encode($list_of_titles); ?>;
</script>

Basically, you feed input from your php into whatever module, object, array, or variable you're working with and then you can refer to that in your javascript wherever you need it. That way you're not forced into putting all your javascript right in with your html. You can even do this with a whole object or collection of object using json_encode (which is javascript's native object notation anyway).

Update: I was typing the above on my cell (not the best way to respond to this sort of thing). Let me demonstrate what I'm describing:

Let's say in your php you have 20 titles you want to work with. You could make an associative array. Use an Id or whatever identifier you want to call it with.

$titleArray = [ 123 => 'Title1', 456 => 'Title2']; //(and so on....)

Then, on the php page you're wanting that data, do this:

<script>
    var titleArray = <?php echo json_encode($titleArray); ?>;
</script>

This will now allow you to access it on that page (or in a js file loaded on that page) by doing this:

var myFirstTitle = titleArray["123"]; //This will return "Title1"

json_encode will take a PHP object and translate the public variables into a javascript object. Simply echoing this to a javascript variable will give javascript the object to work with.

Answer 3

The developer of the lightbox has a solution that I was already partly implementing. For the title to appear in the lightbox, I needed this callback from my original code:

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

But I had neglected to include the title in my PHP loop, corrected here:

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

There's a similar post that also covers this answer, for reference: Title for iframe/video in magnific popup

Thanks again for all your help!