包含/排除 Pinterest "Pin It"按钮的图像

Question

我网站上的每篇文章都包含一个照片库。图库由链接到全尺寸图像的缩略图组成。我还在我的帖子中放置了一个 PinIt 按钮。问题是它会捕获缩略图以进行固定。

根据我对此类问题的发现，我最终得到了以下代码，该代码应从固定中排除缩略图，并改为包含全尺寸图像。这些都不是，虽然是唐...

<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>

有什么建议吗？

Answer 1

我们可以通过在 image 属性中使用 nopin = "nopin" 来避免在图钉操作中显示图像。

例如，

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

Answer 2

为了让 PinIt 按钮选择全尺寸图像，它们应该被加载并在页面上可见。由于它们不是，因此它无法将它们抓取到网格库。作为一种解决方法，我建议有一个自定义逻辑，在触发 PinIt 按钮单击事件之前预加载全尺寸图像。像这样：

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

这样，您将预加载所有图像并将它们放入 imageContainer 块中，然后触发单击以打开网格库以选取图像。

希望对您有所帮助。