javascript - ShareThis 插件在 FancyBox 标题中不起作用

Question

我对所有 JavaScript 都比较陌生，所以请耐心等待 :) 我正在尝试将 ShareThis 插件添加到 FancyBox 的标题中，以便用户可以共享某张图片。它显示得很好，但是当我单击“共享”按钮时没有任何反应。相同的插件在常规页面上工作得很好，所以我猜它是冲突的脚本(FancyBox 脚本中的插件脚本)。不幸的是，我不太了解 JavaScript，无法自己解决它，但我确实需要它来工作...

如果有人知道如何解决它，我将不胜感激!这是我到目前为止在代码方面的内容:

FancyBox 的脚本(包括 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'
    }}
});

});

这是我需要在标题中显示的内容:

<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 script也来自他们的网站。

有什么建议吗？

Answer 1

深入研究这个问题，似乎 ShareThis 按钮在返回 HTML 的 Ajax 调用上并不真正起作用，这意味着 ShareThis 按钮是在同步数据中定义的。因为从 <div id="title1"> 移动/复制内容进入 fancybox 的 title无论 ShareThis 按钮的 html 是否完美呈现，都不会起作用。

解决方法是在打开 fancybox 时动态构建按钮，并提示 ShareThis 脚本使用它们的函数 title 再次放置这些按钮(在 stButtons.locateElements(); 内)。阅读 mroe HERE .当然，我们必须使用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 属性(st_url 和 st_img in the case of pinterest ... 检查 ShareThis documentation 关于共享属性和信息)

然后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-*为每个 anchor 设置属性，以便我们可以将附加信息传递给 fancybox。

然后，fancybox 回调:

1) 使用beforeShow构建 title打电话buildShareThis(url)并添加 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) 调用 ShareThis' stButtons.locateElements()使用 afterShow :

  afterShow: function(){
     stButtons.locateElements();
  }

....应该可以解决问题。

注意:您仍然需要在文档中绑定(bind) 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>

(使用您自己的 publisher ID)

这是使用迄今为止最新的 fancybox 版本 (v2.1.2) 进行测试的，请参阅 WORKING DEMO HERE .请随时检查源代码并根据您的需要进行修改。