2

我对 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 脚本。

有什么建议么？

4

2 回答 2

5

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

title解决方法是在打开 fancybox 时动态构建按钮，并提示 ShareThis 脚本使用它们的函数stButtons.locateElements();read 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. 请注意，我添加了一些 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用于构建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;
  }

stButtons.locateElements()2)使用以下方法调用 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身份证）

这是使用迄今为止最新的fancybox版本（v2.1.2）进行测试的，请参阅此处的工作演示。随意检查源代码并修改它以满足您的需求。

于 2012-10-17T20:48:01.367 回答
0

我猜它不适合这个原因。

当文档准备好使用 $(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'});
});
于 2012-10-17T04:45:01.520 回答