Include/exclude images for Pinterest "Pin It" button

each post in my website, contains a photo gallery. The gallery consists of thumbnail images which link to full-size images. I have also placed a PinIt button in my posts. The problem is that it catches thumbnail images for pining.

Based on what I've found about this kind of issue, I ended up with the following code which should exclude thumbnails from pining, and include full-size images instead. None of these, is donw though...

<a href="path_to_full_image" rel="lightbox[single_post]" pi:pinit:media="path_to_full_image">
     <img src="path_to_thumbnail" width="200" height="130" nopin="nopin" />

Any suggestions?


We can avoid showing an image in the pin action just by using nopin = "nopin" in the image attribute.

For eg.,

<img src="" nopin = "nopin" />

In order for the PinIt button to pick full-size images they should be loaded and visible on the page. Since they are not, it cannot grab them to the grid gallery. As a workaround I would suggest to have a custom logic that pre-loads full-sized images before triggering the PinIt button click event. Something like this:

  image_src = $(this).attr('href');

This way you will pre-load all the images and put them into imageContainer block and then trigger a click that will open Grid Gallery to pick an image.

Hope it helps.

Need Your Help

Parsing check-in XML from google places api

android google-places-api checkin

I am trying to fetch checkin locations from Google places API but I am getting error for XML FileNotFoundException when I try to read it through url.openStream(). My key is correct because I tried ...

F# Units of measure, problems with genericity 2

f# units-of-measurement

Following on from this question, I still seem to be battling at the frontiers of what is possible, though I don't think that I'm doing anything particularly bleeding edge: