javascript - ShareThis plugin not working in FancyBox title

Question

I am rather new to all things JavaScript so please bear with me :) I am trying to add ShareThis plugin to the title of FancyBox so that users can share a certain picture. It shows up nicely but nothing happens when I click on "share" buttons. Same plugin works on a regular page just fine, so I am guessing it's conflicting scripts (plugin script inside the FancyBox script). Unfortunately, I don't know JavaScript well enough to solve it on my own, but I really need this to work...

If anybody knows how to solve it, I will really appreciate it! Here is what I have so far code-wise:

Script for FancyBox (including showing elements in Fancybox title):

$(document).ready(function() {
$(".wrap").fancybox({
    closeClick  : false,
    nextEffect: 'fade',
    prevEffect: 'fade',
    beforeLoad: function() {
        var el, id = $(this.element).data('title-id');

        if (id) {
            el = $('#' + id);

            if (el.length) {
                this.title = el.html();
            }
        }
    },
    helpers : {
    title: {
        type: 'inside'
    }}
});

});

Here is what I need to show in the title:

<div id="title1" class="hidden">
<div class='share'>
<span class='st_facebook_hcount' displayText='Facebook'></span> 
<span class='st_twitter_hcount' displayText='Tweet'></span> 
<span class='st_pinterest_hcount' displayText='Pinterest'></span> 
<span class='st_email_hcount' displayText='Email'></span>
</div>
<p>Some description</p>
</div>

I included the ShareThis script from their website as well.

Any suggestions?

Answer 1

Digging into the issue, it seems that the ShareThis buttons don't really work on Ajax calls that return HTML, meaning the ShareThis button is defined in the synchronous data. Because that moving/copying the content from <div id="title1"> into fancybox's title won't work regardless that the ShareThis buttons' html is perfectly rendered.

The workaround is to build the buttons up dynamically while opening fancybox and prompt the ShareThis script to place those buttons again (inside the title) using their function stButtons.locateElements(); read mroe HERE. Of course, we have to use fancybox's callbacks to sync the task.

First, since what we want to share is specifically the content inside fancybox (I assume) and not the whole page, we need to create the function that builds the ShareThis buttons and pass the URL to share so

function buildShareThis(url){
 var customShareThis  = "<div class='share'>"; // class for styling maybe
     customShareThis += "<span class='st_facebook_hcount' displayText='Facebook' st_url='"+url+"'></span> ";
     customShareThis += "<span class='st_twitter_hcount' displayText='Tweet' st_url='"+url+"'></span>";
     customShareThis += "<span class='st_pinterest_hcount' displayText='Pinterest' st_url='"+url+"' st_img='"+url+"' ></span>";
     customShareThis += "<span class='st_email_hcount' displayText='Email' st_url='"+url+"'></span>";
     customShareThis += "</div>";
     return customShareThis;
}

... the function above basically builds the same html structure as in the code you wanted to show in the title. Notice that I have added some ShareThis attributes (st_url and st_img in the case of pinterest ... check ShareThis documentation about share properties and information)

Then the html can be something like this

<a href="images/01.jpg" class="fancybox" data-fancybox-group="gallery" data-caption="some description 01"><img src="images/01t.jpg" alt="thumb 01" /></a>
<a href="images/07.jpg" class="fancybox" data-fancybox-group="gallery" data-caption="description two" ><img src="images/07t.jpg" alt="thumb 02" /></a>
<a href="images/08.jpg" class="fancybox" data-fancybox-group="gallery" data-caption="third description 03" ><img src="images/08t.jpg" alt="thumb 03" /></a>

Notice the data-* attributes set for each anchor so we can pass additional information to fancybox.

Then, the fancybox callbacks :

1) Use beforeShow to build the title calling buildShareThis(url) and add the caption from the data-caption attribute (if any) :

  beforeShow: function() {
     var caption =  $(this.element).data("caption") ? $(this.element).data("caption") : "";
     this.title = this.title ? this.title + buildShareThis(this.href) + caption : buildShareThis(this.href) + caption;
  }

2) call ShareThis' stButtons.locateElements() using afterShow :

  afterShow: function(){
     stButtons.locateElements();
  }

.... that should do the trick.

NOTE: You still need to bind the ShareThis scripts in your document like

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "ur-7957af2-87a7-2408-5269-db75628d3a14"});</script>

(use your own publisher ID)

This was tested using the latest fancybox version to date (v2.1.2), see WORKING DEMO HERE. Feel free to check the source code and modify it to fit your needs.