ShareThis插件在FancyBox標題中不起作用

Question

我對JavaScript的所有事物都比較陌生，所以請忍受:)我正在嘗試將ShareThis插件添加到FancyBox的標題中，以便用戶可以共享特定圖片。 它顯示得很好，但是當我單擊“共享”按鈕時沒有任何反應。 相同的插件可以在常規頁面上正常工作，所以我猜它是有沖突的腳本（FancyBox腳本中的插件腳本）。 不幸的是，我對JavaScript的了解不足以獨自解決它，但是我確實需要它來工作...

如果有人知道如何解決，我將非常感謝！ 到目前為止，這是我在代碼方面的知識：

FancyBox的腳本（包括在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腳本 。

有什么建議么？

Answer 1

深入探討該問題，似乎ShareThis按鈕在返回HTML的Ajax調用上實際上並不起作用，這意味着ShareThis按鈕在同步數據中定義。 因為無論ShareThis按鈕的html是否完美呈現，將內容從<div id="title1">移動/復制到fancybox的title都無法正常工作。

解決方法是在打開fancybox時動態地構建按鈕，並使用它們的函數stButtons.locateElements();提示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;
}

...上面的函數基本上與您想要在title顯示的代碼建立相同的html結構。 請注意 ，我已經添加了一些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）使用afterShow調用ShareThis'stButtons.locateElements stButtons.locateElements() ：

  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）對它進行了測試，請參閱此處的工作演示 。 隨時檢查源代碼並進行修改以滿足您的需求。

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