我对JavaScript的所有东西都很陌生，所以请耐心等待：)我正在尝试将ShareThis插件添加到FancyBox的标题中，以便用户可以共享特定的图片。它显示得很好，但当我点击"共享"按钮时，什么也没发生。同样的插件在普通页面上也能正常工作，所以我猜这是有冲突的脚本(FancyBox脚本中的插件脚本)。不幸的是，我对JavaScript还不够了解，无法独自解决它，但我真的需要它来工作。。。
如果有人知道如何解决它，我将非常感激！以下是迄今为止我所拥有的代码：
FancyBox的脚本(包括在FancyBox标题中显示元素)：
$(document).ready(function() {
$(".wrap").fancybox({
closeClick : false,
nextEffect: 'fade',
prevEffect: 'fade',
beforeLoad: function() {
var el, id = $(this.element).data('title-id');
if (id) {
el = $('#' + id);
if (el.length) {
this.title = el.html();
}
}
},
helpers : {
title: {
type: 'inside'
}}
});
});
以下是我需要在标题中显示的内容：
<div id="title1" class="hidden">
<div class='share'>
<span class='st_facebook_hcount' displayText='Facebook'></span>
<span class='st_twitter_hcount' displayText='Tweet'></span>
<span class='st_pinterest_hcount' displayText='Pinterest'></span>
<span class='st_email_hcount' displayText='Email'></span>
</div>
<p>Some description</p>
</div>
我还包括了他们网站上的ShareThis脚本。
有什么建议吗？
深入研究这个问题，ShareThis按钮似乎并不真正适用于返回HTML的Ajax调用，这意味着ShareThis按键是在同步数据中定义的。因为无论ShareThis按钮的html是否完美呈现，将内容从<div id="title1">移动/复制到fancybox的title都不会起作用。
解决方法是在打开fancybox时动态构建按钮，并提示ShareThis脚本使用其函数stButtons.locateElements();read mroe HERE再次放置这些按钮(在title内)。当然，我们必须使用fancybox的回调来同步任务。
首先，由于我们想要共享的是fancybox内的内容(我想是)，而不是整个页面，我们需要创建构建ShareThis按钮的函数，并传递URL以共享
function buildShareThis(url){
var customShareThis = "<div class='share'>"; // class for styling maybe
customShareThis += "<span class='st_facebook_hcount' displayText='Facebook' st_url='"+url+"'></span> ";
customShareThis += "<span class='st_twitter_hcount' displayText='Tweet' st_url='"+url+"'></span>";
customShareThis += "<span class='st_pinterest_hcount' displayText='Pinterest' st_url='"+url+"' st_img='"+url+"' ></span>";
customShareThis += "<span class='st_email_hcount' displayText='Email' st_url='"+url+"'></span>";
customShareThis += "</div>";
return customShareThis;
}
上面的函数基本上构建了与您想要在title中显示的代码相同的html结构注意我添加了一些ShareThis属性(在pinterest的情况下是st_url和st_img…检查ShareThis关于共享属性和信息的文档)
然后html可以是类似于的东西
<a href="images/01.jpg" class="fancybox" data-fancybox-group="gallery" data-caption="some description 01"><img src="images/01t.jpg" alt="thumb 01" /></a>
<a href="images/07.jpg" class="fancybox" data-fancybox-group="gallery" data-caption="description two" ><img src="images/07t.jpg" alt="thumb 02" /></a>
<a href="images/08.jpg" class="fancybox" data-fancybox-group="gallery" data-caption="third description 03" ><img src="images/08t.jpg" alt="thumb 03" /></a>
请注意为每个锚点设置的data-*属性，以便我们可以将附加信息传递给fancybox。
然后，fancybox回调：
1) 使用beforeShow构建调用buildShareThis(url)的title，并从data-caption属性(如果有)添加标题：
beforeShow: function() {
var caption = $(this.element).data("caption") ? $(this.element).data("caption") : "";
this.title = this.title ? this.title + buildShareThis(this.href) + caption : buildShareThis(this.href) + caption;
}
2) 使用afterShow:调用ShareThis的stButtons.locateElements()
afterShow: function(){
stButtons.locateElements();
}
那就行了。
注意：您仍然需要像一样在文档中绑定ShareThis脚本
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "ur-7957af2-87a7-2408-5269-db75628d3a14"});</script>
(使用您自己的publisherID)
这是使用迄今为止最新的fancybox版本(v2.1.2)进行测试的，请参阅此处的工作演示。请随时检查源代码并根据您的需要进行修改。
我猜它不起作用是因为这个原因。
当文档准备好时，您正在使用$(document).ready加载花式框代码(这很好)。初始化sharethis元素的代码可能已经运行(从加载它的代码示例中看不清楚)。因此，当您使用$(document).ready创建一组新的sharethis元素时，它们不会被sharethis代码处理。
试试这个：
$(document).ready(function() {
$(".wrap").fancybox({
## no change to your code above ##
});
// put your publisher code in below
stLight.options({publisher:'12345'});
});