Question

我有一个图片库，我希望用户能够将这些图片分享到他们的社交网络。

单击缩略图时，将使用colorbox打开灯箱，并将图像主视图/images/view/<id>中的ajax呈现为HTML，并在其下方添加AddThis小部件。

但是我发现因为我在使用ajax查询加载小部件时，显然没有事件处理程序可以捕获并加载它的位。它也非常正确地分享了主要的网址，因为它已被加载到灯箱中。

有没有办法覆盖这个功能或另一个允许这种功能的共享小部件？或者我是否需要创建自己的共享小部件？

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>

然后当你完成加载你的ajax时，你需要运行，

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

将重新初始化小部件。因此，我的代码。我作弊，并将其附加到全局ajax处理程序，因为我的php框架</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小部件现在将正确加载。在第二个问题上，将灯箱内容指定为共享项目。

这更简单，因为您可以将url添加到button元素中。所以你最终得到如下的小部件标记。

<!-- 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 -->

通过ajax将共享小部件加载到灯箱并共享灯箱内容

1 个答案: