0

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.

Improve this question
2

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> ';
}
Improve this answer
  • Hi Johnathan, this is very close. I added the code as you noted above, but I get an error: this.data is not a function. Is there another way that should be written? – forrest Jan 27 '15 at 15:56
  • Sorry, I was using jquery's data method, so you might need to surround this with jquery selectors like $(this).data(...). If that works, I'll edit the answer to reflect that – Johnathan Waters Jan 27 '15 at 18:20
  • You could also try var urltitle = $(this).attr('data-urltitle'); if you're stuck. – foamcow Jan 28 '15 at 10:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.