Aftershow in fancybox jQuery

Question

I had the same problem this person: ShareThis plugin not working in FancyBox title But now I have gotten it work, except the

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

Where in this code should I put it? I've tried many places, but it just says error. It say's I am placing it wrong. Where should I place it in the script below?

<script type="text/javascript">



$(document).ready(function(){
    $(".fancybox").fancybox({


             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;



        if (this.title) { ''

        // New line
            this.title += '<br />';



        }
    },




        nextEffect  : 'fade',
prevEffect  : 'fade',
padding     : 0,
margin      : [15, 15, 50, 15],
afterLoad   : addLinks,
beforeClose : removeLinks

        });


      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_tumblr_hcount' displayText='Tumblr' st_url='"+url+"'></span>";
 customShareThis += "</div>";
 return customShareThis;
}

    function addLinks() {
var list = $("#links");

if (!list.length) {    
    list = $('<ul id="links">');

    for (var i = 0; i < this.group.length; i++) {
        $('<li data-index="' + i + '"><label></label></li>').click(function() {     $.fancybox.jumpto( $(this).data('index'));}).appendTo( list );
    }

    list.appendTo( 'body' );
 }

list.find('li').removeClass('active').eq( this.index ).addClass('active');
}

function removeLinks() {
$("#links").remove();    
}

});

</script>

Solution

You can set all fancybox API options, including fancybox callbacks (afterLoad, afterShow, beforeClose, etc.) like :

$(".fancybox").fancybox({
    nextEffect: 'fade',
    prevEffect: 'fade',
    padding: 0,
    margin: [15, 15, 50, 15],
    afterLoad: addLinks,
    afterShow: function () {
        stButtons.locateElements();
    },
    beforeClose: removeLinks
});

Assuming you have properly defined your addLinks and removeLinks functions somewhere else in your script.