How do include a file path in a jQuery statement?

Question

I am working on a photo portfolio page that uses fancy-box to display larger images of the photographs. This also includes a optional Buy Now link in the title area of the photo.

The code for the photo thumbnails and related popup images is as follows:

{exp:low_reorder:entries set="portfolio_low_sort"  limit="500" }
    <a class="fancybox project {categories}{category_name} {/categories}"  href="{large_image}" title="{title}"><img src="{portfolio_thumbnail}" alt="{title}" width="262" height="175"></a>
{/exp:low_reorder:entries} 

The jQuery code to include the Buy Now button and Pinterest link:

$(document).ready(function() {
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
openEffect  : 'elastic',
closeEffect : 'elastic',
nextEffect  : 'fade',
prevEffect  : 'fade',
nextSpeed   : 1250,
prevSpeed   : 1250,
beforeShow  : function () {
if (this.title) {

// Add pin it button
this.title += '&nbsp; <a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark"  data-pin-height="28"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_28.png" /></a> ';

// Add buy now button
this.title += '<a href="/photo/image/{url_title}/" data-url="' + this.href + '"><span>Buy now</span></a> ';
}
},
helpers : {
title : {
type: 'inside'
}
}  
});
});

Currently I have a link to the image page where the user can Buy Now and this is where I get stuck. Because this is jQuery and not part of the entry, I am not sure how to bring in the "url_title" part.

Any guidance on this would be appreciated.

Answer 1

The url title is not specified in your script. I would recommend putting the url title in a data attribute in the html code.

<a data-urltitle="{url_title}" class="fancybox project {categories}{category_name} {/categories}"  href="{large_image}" title="{title}">...</a>

then get that attribute in the js

// Add buy now button
var urltitle = this.data('urltitle');
this.title += '<a href="/photo/image/"+urltitle+"/" data-url="' + 
this.href + '"><span>Buy now</span></a> ';
}