1

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

单击缩略图时,将使用颜色框打开一个灯箱,并且图像主视图中的 ajax/images/view/<id>呈现为 HTML,其下方有一个 AddThis 小部件。

但是我发现因为我正在使用 ajax 查询加载小部件,所以显然没有事件处理程序可以捕获和加载它的位。它也非常正确地共享主 url,因为它已被加载到灯箱中。

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

4

1 回答 1

0

我现在已经找到了解决这个问题的方法,尽管它更像是一种 hack,而不是其他任何东西。

基本原则是每次重新加载小部件时都需要重新初始化它。

简单的前提是您?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 小部件现在将正确加载。关于第二个问题,将灯箱内容指定为共享项目。

这要简单得多,因为您可以将 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 回答