Wordpress PHP link inside Javascript (for Photoswipe Custom Share URL)

Question

I'm wondering if there is a way to put my Wordpress attachment link inside of a javascript function. In simple terms, it would function like so:

$attach_url = "<?php echo wp_get_attachment_url(); ?>";
function () {
    return $attach_url;
}

More specifically, I'm looking for a way to implement it with Photoswipe's share buttons (full source code here):

    $attach_url = = "<?php echo wp_get_attachment_url(); ?>";

    (this, function () {
        'use strict';
    var PhotoSwipeUI_Default =
     function(pswp, framework) {
    shareButtons: [
                {url:'https://www.facebook.com/sharer/sharer.php?u={{attachment_pg_url}}'},
            ],  
            getAttachmentPageURL: function ( shareButtonData ) {
                return $attach_url;},
            parseShareButtonOut: function(shareButtonData, shareButtonOut) {
                return shareButtonOut;
            },
        _updateShareURLs = function() {
        var shareButtonOut = '',
                        shareButtonData,
                        shareURL,
                        attachment_pg_url;
        for(var i = 0; i < _options.shareButtons.length; i++) {
                        shareButtonData = _options.shareButtons[i];

                        attachment_pg_url = _options.getAttachmentPageURL(shareButtonData);

                        shareURL = shareButtonData.url.replace('{{attachment_pg_url}}', attachment_pg_url );

Any help is much appreciated!

EDIT

Here's my updated code, which is almost working. The js file is interpreting the enqueue script from functions.php. However, the url displayed is <?php echo get_attachment_link(); ?>, rather than the actual link (ex: home.com/attachment-page), which does display correctly when I use this php code in the loop.

How can I get the url to output a link, not the actual php code?

In functions.php:

    // Custom Photoswipe Share URL  
    wp_enqueue_script( 'photoswipe_custom_share_link', get_template_directory_uri() . '/custom_path_here/photoswipe-ui-single-item.js' );
    $attach_url = "<?php echo get_attachment_link(); ?>";
    wp_localize_script( 'photoswipe_custom_share_link', 'pswp_custom_share', $attach_url );

In the Photoswipe js file (with some extra fixes from my original post):

    (this, function () {
        'use strict';
    var PhotoSwipeUI_Default =
     function(pswp, framework) {
    shareButtons: [
                {url:'https://www.facebook.com/sharer/sharer.php?u={{attach_url}}'},
            ],  
            getAttachmentURLForShare: function ( /*shareButtonData */) {
            return pswp_custom_share;
            },
            parseShareButtonOut: function(shareButtonData, shareButtonOut) {
                return shareButtonOut;
            },
        _updateShareURLs = function() {
        var shareButtonOut = '',
                        shareButtonData,
                        shareURL,
                        attachment_url;
        for(var i = 0; i < _options.shareButtons.length; i++) {
                        shareButtonData = _options.shareButtons[i];

                        attachment_url = _options.getAttachmentURLForShare(shareButtonData);

                        shareURL = shareButtonData.url.replace('{{attach_url}}', encodeURIComponent(attachment_url) );

EDIT

I made the mistake of using quotes in my enqueue script. With the below code, formatting is now correct. The only problem is the url output is "home.com" instead of "home.com/attachment-page."

How can I define the dynamically generated attachment page url outside of the loop? Do I need to echo it?

$attach_url = get_attachment_link($attachment->ID);

EDIT - SOLVED!

I needed to use JavaScript enqueue to get base url of attachment in the loop. (Based on the answer here and with thedarkcoder's help).

In functions.php:

// Custom Photoswipe Share URL
function pswp_custom_share()
     {  
         /* Get the ID of the current post */
         global $post;
         $ID = $post->ID;

         /* register the script */
         wp_register_script( 'photoswipe_custom_share_link', get_template_directory_uri() . 'custom_path_here/photoswipe-ui-single-item.js', array('jquery'), false, true );
         $attach_url = array(
             'attachment_page'    => get_attachment_link( $ID )
         );
         wp_enqueue_script( 'photoswipe_custom_share_link' );
         wp_localize_script('photoswipe_custom_share_link', 'attach_url', $attach_url);

    }

     /* If we're not in the admin section call our function on the wp_enqueue_scripts hook  */
     if ( !is_admin() ) add_action( "wp_enqueue_scripts", "pswp_custom_share", 10 );

In the Photoswipe js file:

getAttachmentURLForShare: function ( /*shareButtonData */) {
                return attach_url.attachment_page;
            },

Answer 1

You can use WordPress enqueue script function to achieve this

Please follow below link for detailed info

https://code.tutsplus.com/tutorials/how-to-pass-php-data-and-strings-to-javascript-in-wordpress--wp-34699

Let me know if it resolves your problem