Calling PHP inside javascript markup

I need to add a php link inside of javascript markup (for the magnific popup plugin).

I’ve tried this two ways:

Attempt #1

 $('.video').magnificPopup({
     iframe: {
         markup: '<a href="' +videoURL+ '">Link to video page</a>',
    };
    var videoURL ="<?php get_permalink( $thumbnail->ID );?>";

Attempt #2

In functions.php:

function mfp_popup_video(){
    //for pages without custom queries
         global $post;
         $ID = $post->ID;
         $attachment_link = get_permalink( $thumbnail->ID );

    //register the script
         wp_register_script( 'mfp_video_link');
         $mfp_video_url = array(
             'attachment_page'    => get_attachment_link( $ID ),
         );
         wp_enqueue_script( 'mfp_video_link' );
         // Localize the variables
         wp_localize_script('mfp_video_link', 'mfp_video_url', $mfp_video_url);

}

In javascript:

$('.video').magnificPopup({
iframe: {
         markup: '<a href="'+mfp_video_url.attachment_page+'">Link to video page</a>',
    };

It seems that, in either case, adding +videoURL+ or +mfp_video_url.attachment_page+ prevents the plugin from loading on the page. There is a similar post here, but it doesn’t address the proper method using wordpress php.

Any idea on how to accomplish this is greatly appreciated!

Read more here: Calling PHP inside javascript markup

Leave a Reply

Your email address will not be published. Required fields are marked *