我有一个图片库,我希望用户能够将这些图片分享到他们的社交网络。
单击缩略图时,将使用颜色框打开一个灯箱,并且图像主视图中的 ajax/images/view/<id>
呈现为 HTML,其下方有一个 AddThis 小部件。
但是我发现因为我正在使用 ajax 查询加载小部件,所以显然没有事件处理程序可以捕获和加载它的位。它也非常正确地共享主 url,因为它已被加载到灯箱中。
有没有办法覆盖这个功能或另一个允许这种功能的共享小部件?还是我需要创建自己的共享小部件?
我现在已经找到了解决这个问题的方法,尽管它更像是一种 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 -->