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读取mroe HERE再次放置这些按钮（在stButtons.locateElements();内）。当然，我们必须使用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-*属性，以便我们可以将其他信息传递给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）使用stButtons.locateElements()：

致电ShareThis'afterShow

  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>

（使用您自己的publisher ID）

使用迄今为止最新的fancybox版本（v2.1.2）对此进行了测试，请参阅WORKING DEMO HERE。请随意检查源代码并进行修改以满足您的需求。

Answer 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'});
});

ShareThis插件无法在FancyBox标题中使用

2 个答案: