I'm using colorbox to create a pop-up image gallery, which works fine. Now, I am trying to add the pinterest pinit button to the gallery. It is pinterest's javascript, as outlined here:
https://developers.pinterest.com/on_hover_pin_it_buttons/
On the gallery photos, the pinit button does appear on hover, however it is using the html page's meta for the pin description. I took a look at the pinterest javascript, and here is how I think the description is set:
encodeURIComponent(a.getAttribute("data-pin-description")||a.title||a.alt||d.d.title
I've tried setting the data-pin-description, title, and alt text (alt in the tag, title in the tag), but I don't think any of them are being populated in the colorbox gallery because I always get the meta html title.
Here is the colorbox javascript I am using:
<script type="text/javascript">
$(document).ready(function(){
var $gallery = $('a[rel=gallery]');
$gallery.colorbox();
$('a#openGallery').click(function(e){
$gallery.eq(0).click();
e.preventDefault();
});
and here is the html:
<a href="/Images/3406_lg.jpg" rel="gallery" title="My link title"><img src="/Images/Thumbs/FC-3406_lg.jpg" border="0" alt="my large alt text" width="70" height="70" class="thumb" data-pin-description="my data pin description" /></a>
Do I need to somehow use setAttribute in the javascript to have it populate when colorbox pops-up? I tried and it didn't work but maybe the syntax was off.
Thanks,
Bill
I finally figured out a way to make it work, but I had to edit the colorbox js directly. I added this line directly after photo.onload = null
photo.alt = $(element).attr('data-description');
That allowed me to then use the data-description attribute on the tag in the html and have pinterest pick it up when the image is pinned.