Question

Pinterest用于单独的照片图像而不是网页网址。 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'）都无法正常运行原因。您可以查看page here，脚本为here。它们是“未定义的”并且是空的。

有人可以帮助我让他们工作吗？非常感谢！

Answer 1

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

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

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

对于正在寻找解决方案的其他人，这里是modified prettyphoto javascript

Answer 2

大家都知道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>

这对于漂亮照片库不起作用，所以现在这里是解决方案，

当我们初始化prettyphoto时，我们必须使用script.js中的代码。

像这样，代码

$(document).ready(function(){

$（“ prettyPhoto”）。prettyPhoto（{ changepicturecallback：onPictureChanged， }）;

function onPictureChanged（）{

var href =“http://pinterest.com/pin/create/button/?url=”'+ encodeURIComponent（location.href.replace（location.hash，“”））+'“＆amp; media =”+ $（'＃fullResImage'）。attr（ 'SRC'）;

jQuery（'。pp_social'）。append（“http://assets.pinterest.com/images/PinExt.png'title ='Pin It'/＆gt;”）;

}

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

Add Pinterest to social media icons in prettyPhoto

我相信它会对你有所帮助。

由于

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>

在prettyPhoto插件中获取Pinterest的单独图像src和标题？

4 个答案: