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 += ' <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.