2

私は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スクリプトも含めました。

助言がありますか？

4

2 に答える 2

5

この問題を掘り下げてみると、ShareThis ボタンは、HTML を返す Ajax 呼び出しでは実際には機能しないようです。つまり、ShareThis ボタンは同期データで定義されています。ShareThisボタンのhtmlが完全にレンダリングされているにもかかわらず、コンテンツ<div id="title1">をfancyboxに移動/コピーすることは機能しないためです。title

回避策は、fancybox を開くときにボタンを動的に構築し、ShareThis スクリプトにtitle、関数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;
}

... 上記の関数は、基本的に、 で表示したかったコードと同じ html 構造を構築しますtitle。いくつかの ShareThis 属性を追加したことに注意してください (ピンタレストの場合は 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を作成し、属性からキャプションを追加するために使用します (存在する場合):titlebuildShareThis(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>

（ご自身のpublisherIDをご利用ください）

これは、現在までの最新の 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 に答える