ShareThis插件无法在FancyBox标题中使用 [英] ShareThis plugin not working in FancyBox title
问题描述
我对JavaScript的所有事情都很陌生，所以请耐心等待:)我正在尝试将ShareThis插件添加到FancyBox的标题中，以便用户可以共享某个图片。它很好地显示但是当我点击共享按钮时没有任何反应。相同的插件在普通页面上运行得很好，所以我猜它是冲突的脚本（FancyBox脚本中的插件脚本）。不幸的是，我不太了解JavaScript以便自己解决它，但我真的需要这个来工作...
I am rather new to all things JavaScript so please bear with me :) I am trying to add ShareThis plugin to the title of FancyBox so that users can share a certain picture. It shows up nicely but nothing happens when I click on "share" buttons. Same plugin works on a regular page just fine, so I am guessing it's conflicting scripts (plugin script inside the FancyBox script). Unfortunately, I don't know JavaScript well enough to solve it on my own, but I really need this to work...
如果有人知道如何解决它，我真的很感激！以下是我到目前为止的代码：
If anybody knows how to solve it, I will really appreciate it! Here is what I have so far code-wise:
FancyBox的脚本（包括显示Fancybox标题中的元素）：
Script for FancyBox (including showing elements in Fancybox title):
$(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'
}}
});
});
以下是我需要在标题中显示的内容：
Here is what I need to show in the title:
<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脚本也来自他们的网站。
I included the ShareThis script from their website as well.
有什么建议吗？
推荐答案
深入研究这个问题，似乎ShareThis按钮不能真正用于返回HTML的Ajax调用，这意味着ShareThis按钮在同步数据中定义。因为将内容从< div id =title1> 移动/复制到fancybox的标题中不会无论ShareThis按钮的html是否完美渲染，都可以正常工作。
Digging into the issue, it seems that the ShareThis buttons don't really work on Ajax calls that return HTML, meaning the ShareThis button is defined in the synchronous data. Because that moving/copying the content from <div id="title1"> into fancybox's title won't work regardless that the ShareThis buttons' html is perfectly rendered.
解决方法是在打开fancybox时动态构建按钮，并提示ShareThis脚本再次放置这些按钮（使用函数 stButtons.locateElements（）; 读取mroe 这里。当然，我们必须使用fancybox的回调来同步任务。
The workaround is to build the buttons up dynamically while opening fancybox and prompt the ShareThis script to place those buttons again (inside the title) using their function stButtons.locateElements(); read mroe HERE. Of course, we have to use fancybox's callbacks to sync the task.
首先，因为我们想要分享的内容特别是fancybox中的内容（我假设）而不是整个页面，我们需要创建构建ShareThis按钮并传递URL以共享的功能，以便
First, since what we want to share is specifically the content inside fancybox (I assume) and not the whole page, we need to create the function that builds the ShareThis buttons and pass the URL to share so
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;
}
...上面的函数基本上构建了与代码中相同的html结构你想在标题中显示。 注意我添加了一些ShareThis属性（st_url和 st_img pinterest的情况 ...检查 ShareThis文档关于共享属性和信息）
... the function above basically builds the same html structure as in the code you wanted to show in the title. Notice that I have added some ShareThis attributes (st_url and st_img in the case of pinterest ... check ShareThis documentation about share properties and information)
然后html可以是这样的
Then the html can be something like this
<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>
注意 数据 - * 为每个锚设置的属性，以便我们可以将其他信息传递给fancybox。
Notice the data-* attributes set for each anchor so we can pass additional information to fancybox.
然后，fancybox回调：
Then, the fancybox callbacks :
1）使用 beforeShow 构建标题调用 buildShareThis（url）并添加数据标题属性（如果有）的标题：
1) Use beforeShow to build the title calling buildShareThis(url) and add the caption from the data-caption attribute (if any) :
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）调用ShareThis' stButtons.locateElements（） 使用 afterShow ：
2) call ShareThis' stButtons.locateElements() using afterShow :
afterShow: function(){
stButtons.locateElements();
}
....这应该可以解决问题。
.... that should do the trick.
注意：您仍然需要在文档中绑定ShareThis脚本，例如
NOTE: You still need to bind the ShareThis scripts in your document like
<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>
（使用您自己的发布商 ID）
(use your own publisher ID)
这是使用迄今为止最新的fancybox版本（v2.1.2）测试的，参见在这里工作演示。请随意检查源代码并进行修改以满足您的需求。
This was tested using the latest fancybox version to date (v2.1.2), see WORKING DEMO HERE. Feel free to check the source code and modify it to fit your needs.
这篇关于ShareThis插件无法在FancyBox标题中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
