ajax経由でウィジェットをライトボックスにロードしてライトボックスのコンテンツを共有する

Question

私はイメージギャラリーを持っており、ユーザーはそれらのイメージをソーシャルネットワークに共有できるようにしたいと考えています。

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

しかし、私はajaxクエリを使用してウィジェットを読み込んでいるので、明らかにそれをキャッチしてビットをロードするためのイベントハンドラはありません。また、ライトボックスにロードされているので、メインURLを共有することもできます。

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

Answer 1

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

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

シンプルな前提はJavaScriptをロードするときに、あなたが?domready=1が含まれていることです。その後

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

ときは、完全なロードあなたのアヤックス、あなたは、ウィジェットを再初期化します

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

を実行する必要があります。私のコードはこうです。あなたはこれをやったら、私は

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

に

騙さ、およびグローバルAJAXハンドラにそれを取り付けた、なぜなら私のPHPフレームワークの </aside>、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 -->