Load sharing widget via ajax into a lightbox and share the lightbox content

Question

I've got a gallery of images, and I'd like users to be able to share those images to their social network.

When a thumbnail is clicked, an lightbox opens using colorbox, and ajax's in the images main view /images/view/<id> rendered as HTML, with an AddThis widget beneath it.

However I'm finding that because I'm loading the widget in using an ajax query there is obviously no event handler for it to catch and load it's bits. It's also, quite rightly, sharing the main url, seeing as it's been loaded in a lightbox.

Is there any way to overwrite this functionality or another sharing widget which will allow this kind of functionality? Or do I need to create my own sharing widget?

score 0 · Accepted Answer · answered Jan 11 '12 at 12:25

I have found a solution to this problem now, although it is more of a hack then anything else.

The basic principle is that you need to reinitialise the widget every time you load it back in.

The simple premise is that you include a ?domready=1 when loading the javascript.

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

Then when you complete loading your ajax, you need to run,

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

Which will reinitialise the widget. My code is thus. I cheated, and attached it to the global ajax handler, because of my php framework </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();
       }
   });

Once you've done this, the addThis widget will now load properly. Onto the second problem, of specifying the lightbox content as the sharing item.

This was much simpler, in that you can add the url into the button element. So you end up with widget markup like the following.

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

Load sharing widget via ajax into a lightbox and share the lightbox content

1 Answers1