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

Question

我是所有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脚本.

有什么建议？

Answer 1

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

解决方法是建立按钮后动态,同时打开的fancybox,并再次提示ShareThis脚本来放置这些按钮(内部title使用它们的功能)stButtons.locateElements();读MROE 这里.当然,我们必须使用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;
}

...上面的函数基本上构建了与您想要在其中显示的代码相同的html结构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;
  }

2)致电ShareThis' stButtons.locateElements()使用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>

(使用您自己的publisherID)

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