1

画像のギャラリーがあり、ユーザーがこれらの画像をソーシャル ネットワークで共有できるようにしたいと考えています。

サムネイルをクリックすると、カラーボックスを使用してライトボックスが開き、HTML としてレンダリングされた画像のメイン ビューに ajax が表示/images/view/<id>され、その下に AddThis ウィジェットが表示されます。

ただし、ajaxクエリを使用してウィジェットをロードしているため、ビットをキャッチしてロードするためのイベントハンドラーが明らかにないことがわかりました。また、ライトボックスにロードされていることを確認して、メインの URL を共有しているのも当然です。

この機能またはこの種の機能を可能にする別の共有ウィジェットを上書きする方法はありますか? または、独自の共有ウィジェットを作成する必要がありますか?

4

1 に答える 1

0

私は今、この問題の解決策を見つけましたが、それは他の何よりもハックです。

基本的な原則は、ウィジェットを再度ロードするたびにウィジェットを再初期化する必要があるということです。

単純な前提は?domready=1、JavaScriptをロードするときにを含めることです。

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?domready=1#pubid=/*Your pubid*/"></script>

次に、ajaxの読み込みが完了したら、実行する必要があります。

window.addthis.ost = 0;
window.addthis.ready();

これにより、ウィジェットが再初期化されます。私のコードはこうです。私は自分のphpフレームワークのために、それをだましてグローバルajaxハンドラーにアタッチしました</aside>

   $('.content').ajaxComplete(function(event, request, settings){
       // We need to reinitialise the addthis box every time we ajax a lightbox in
       // Apologies for using regex to read html when javascript can parse html! 
       // http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags
       if(request.responseText.match(/gallery-lightbox/i)){
            window.addthis.ost = 0;
            window.addthis.ready();
       }
   });

これを行うと、addThisウィジェットが正しく読み込まれるようになります。2番目の問題は、ライトボックスのコンテンツを共有アイテムとして指定することです。

これは、ボタン要素にURLを追加できるという点で、はるかに単純でした。したがって、次のようなウィジェットのマークアップが作成されます。

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
    <a class="addthis_button_preferred_1" addthis:url="http://example.com/<?php echo $image['Image']['id'];?>" addthis:title="My example title"></a>
    <a class="addthis_button_preferred_2" addthis:url="http://example.com/<?php echo $image['Image']['id'];?>" addthis:title="My example title"></a>
    <a class="addthis_button_preferred_3" addthis:url="http://example.com/<?php echo $image['Image']['id'];?>" addthis:title="My example title"></a>
    <a class="addthis_button_preferred_4" addthis:url="http://example.com/<?php echo $image['Image']['id'];?>" addthis:title="My example title"></a>
    <a class="addthis_button_compact" addthis:url="http://example.com/<?php echo $image['Image']['id'];?>" addthis:title="My example title"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?domready=1#pubid=/*Your pubid*/"></script>
<!-- AddThis Button END -->
于 2012-01-11T12:25:01.407 に答える