Как разместить php-содержимое в javascript-разметке?

Question

У меня есть видео галерея, и все заголовки генерируются php. Лайтбокс для этих видео, однако, настраивается в javascript. Как я могу поместить названия php в iframemarkup?

Смотрите здесь:

$('.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

Для справки, мне нужно название крепежного ниже ($attachment_data['title']) в яваскрипте секции упомянутой (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

Попробуйте это:

$('.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'); 
} 
}); 

Обратите внимание на использование <?= стенографии для echo. (read more about it)

Answer 2

Существует несколько способов взаимодействия javascript и PHP. Вы можете вытащить клиента, используя вызов ajax. Если вам нужно получить кучу данных асинхронно, это может быть и так. Если у вас будет 20 копий этого iframe, вы можете использовать вызов AJAX, чтобы вытащить целый массив значений/объектов с помощью JSON, а затем вы можете делать с ними все, что захотите.

Но ... Я подозреваю, что вы просто используете этот iframe один раз на странице. Погрузка некоторых аяксов на одноразовую вещь, вероятно, немного переборщила.

Если вы размещаете свой javascript прямо на своей странице, вы можете сделать так, как предлагал IzzEps, и просто эхо ваши значения php прямо в iFrame. Но я знаю, что большинству людей нравится оставлять свой javascript отдельно от своего html-содержимого в файле .js. Это делает его более удобным. Хотя это и не невозможно, php наиболее легко помещает контент в файлы .php, а не другие, такие как js. У меня нет опыта в том, чтобы заставить браузер использовать php-файл для источника скрипта.

Что я нашел самым простым и чистым - написать свой javascript в моем .js-файле как обычно, тогда я добавлю переменную (-и) в мой .php-файл как можно минимально вверху в скрипте тег.

Таким образом, в верхней части страницы, вы можете сделать что-то, как и любой из них:

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

В принципе, вы подаете входной сигнал от вашего PHP в любой модуль, объект, массив или переменную вы находитесь работая с, а затем вы можете ссылаться на это в своем javascript везде, где вам это нужно. Таким образом, вы не должны вставлять все свои javascript прямо в свой html. Вы даже можете сделать это с целым объектом или коллекцией объекта, используя json_encode (который в любом случае является нотной записью на основе javascript).

Обновление: Я печатал выше на моей соте (не лучший способ ответить на подобные вещи). Позвольте мне продемонстрировать, что я описываю:

Скажем, на вашем php у вас есть 20 названий, с которыми вы хотите работать. Вы можете создать ассоциативный массив. Используйте идентификатор или любой другой идентификатор, с которым вы хотите позвонить.

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

Затем на странице PHP Вы желаете, что данные, сделать это:

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

Это теперь позволит вам получить доступ к нему на этой странице (или в файле JS, загруженного на что страница), делая это:

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

json_encode будет принимать объект PHP и переводить публичные переменные в JavaScript Object. Простое повторение этой переменной javascript даст javascript, с которым объект будет работать.

Answer 3

У разработчика лайтбокса есть решение, которое я уже частично реализую. Для названия появится в осветителе, мне нужен этот обратный вызов от моего первоначального кода:

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

Но я забыл включить титул в моем PHP цикле, скорректированный здесь:

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

Там в аналогичный пост, который также охватывает этот ответ, для справки: Title for iframe/video in magnific popup

Еще раз спасибо за помощь!