在漂亮的照片插件中获取Pinterest的个人图像来源和标题

Question

Pinterest适用于单个照片图像，而不是网页URL。Twitter和Facebook只使用页面URL很好，但对于Pinterest，每个单独的图像URL都应该提供给"Pin It"按钮链接而不是页面URL。

我正在尝试将 Pin It 按钮添加到 prettyPhoto 插件中，到目前为止一切都已设置好，除了我不知道如何获取幻灯片中每个单独图像的 img src 和标题，以便将它们附加到"Pint It"链接中。

我目前在jquery.prettyPhoto.js中的facebook代码之后立即拥有的内容：

<div class="pinterest">
    <a href="http://pinterest.com/pin/create/button/?url='+window.location.href+'&media='+$('#fullResImage').attr('src')+'&description='+$(this).attr('title')+'" class="pin-it-button" count-layout="horizontal" target="_blank">
        <img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" />
    </a>
</div>

但是由于某种原因，$（'#fullResImage'）.attr（'src'） 和 $（this）.attr（'title'） 都无法正常工作。你可以在这里查看页面，脚本在这里。它们是"未定义的"和空的。

有人可以帮我让他们工作吗？多谢！

Answer 1

众所周知

，Pinterest是针对单个照片图像而不是网页URL，因此我们需要做一些不同的事情，

<a href="http://pinterest.com/pin/create/button/?url='+encodeURIComponent(location.href.replace(location.hash,""))+'&media={path}&description={title}" class="pin-it-button" count-layout="horizontal" target="_blank">
    <img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" />
</a>

这在漂亮的照片画廊上不起作用，所以现在这里是解决方案，

我们必须在脚本中使用代码.js当我们初始化 prettyphoto.

像这样，代码

$(document).ready(function(){
    $(‘.prettyPhoto’).prettyPhoto({
        changepicturecallback: onPictureChanged,
    });
    function onPictureChanged() {
    var href= “http://pinterest.com/pin/create/button/?url=”‘+ encodeURIComponent(location.href.replace(location.hash,”")) +’”&media=”+$(‘#fullResImage’).attr(‘src’);
    jQuery(‘.pp_social’).append(“<div class=’pinterest’ ><a href=’”+ href +”‘ class=’pin-it-button’ count-layout=’horizontal’ target=’_blank’><img border=’0′ src=’http://assets.pinterest.com/images/PinExt.png’ title=’Pin It’ /></a></div>”);
}

有关完整的说明，请访问我的教程页面。

将Pinterest添加到漂亮照片中的社交媒体图标

我相信它会对你有很大帮助。

谢谢

Answer 2

我不确定上述解决方案是如何工作的，因为{path}永远不会在settings.social_tools中被替换。

唯一的方法是声明一个全局并根据大小写（图像/视频/等）为其分配媒体 url，最后更新.pp_socialdiv

我相信它可以更优雅地完成，但这更像是一个快速补丁，它只是工作。

对于正在寻找解决方案的其他人，这里是修改后的漂亮照片JavaScript

Answer 3

这是它工作的唯一方法。

不要对图像使用 ID，因为每次要固定图像时，每次网页上的第一个带有 ID 的图像都会占用

。

代码见下文：

$('.prettyPhoto').prettyPhoto({ changepicturecallback: onPictureChanged, });
function onPictureChanged() {
  var href= "http://pinterest.com/pin/create/button/?url=" + encodeURIComponent(location.href.replace(location.hash,"")) +"&media="+$('#pp_full_res').find('img').attr('src');
  jQuery('.pp_social').append("<div class='pinterest' ><a   href='"+ href +"' class='pin-it-button' count-layout='horizontal' target='_blank'><img border='0' src='http://assets.pinterest.com/images/PinExt.png' title='Pin It'/></a></div>");
}

Answer 4

将代码更改为此代码，它现在可以工作：

<div class="pinterest">
    <a href="http://pinterest.com/pin/create/button/?url='+encodeURIComponent(location.href.replace(location.hash,""))+'&media={path}&description={title}" class="pin-it-button" count-layout="horizontal" target="_blank">
        <img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" />
    </a>
</div>