Geek Answers Handbook

Include / Exclude Images for the Pinterest Pin It Button

Each post on my site contains a photo gallery. The gallery consists of thumbnails that link to full-size images. I also posted a PinIt button in my posts. The problem is that it catches thumbnails for toasting.

Based on what I found about this problem, I got the following code, which should exclude thumbnails from pine and include full-size images. None of this, 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" /> </a>

Any suggestions?

+4
source share
2 answers

In order for the PinIt button to select full-size images, they must be loaded and visible on the page. Since this is not the case, he cannot capture them in the mesh gallery. As a workaround, I suggest having custom logic that preloads full-size images before triggering the PinIt button click event. Something like that:

 $('a[rel="lightbox"]').each(function(){ image_src = $(this).attr('href'); $('<img/>').attr('src',image_src).appendTo('#imageContainer'); ; }) $('#pinItButton').trigger('click');

Thus, you will preload all the images and place them in the imageContainer block, and then run the click that will open the Grid Gallery to select the image.

Hope this helps.

0
source

We can avoid displaying the image in the output action by using nopin = "nopin" in the image attribute.

For instance,

 <img src="http://via.placeholder.com/350x150" nopin = "nopin" />
0
source

More articles:


All Articles