Fire fancybox function inside a onlick? Simulating the normal fire
<p>This is a massive conundrum for me. I will explain in full.</p>

<p>I normally simply fire the fancyapps fancybox plugin like this...</p>

<pre><code>$("a.gallery-thumb").fancybox({

    afterLoad   : function() {

        /* shtuff */

    }

});
</code></pre>

<p><br /></p>

<p>But I need to pass a unquique varible when the <code>a.gallery-thumb</code> is clicked. This unique varible is generated using this...</p>

<pre><code>FB.Canvas.getPageInfo(function(info) {

    var scrollPosition = info.scrollTop;

};
</code></pre>

<p>This <code>scrollPosition</code> unique varible is the current scroll position when my <code>a.gallery-thumb</code> is clicked. </p>

<p><br /></p>

<p>So I need to then pass the <code>scrollPosition</code> variable into the fancybox function below.</p>

<pre><code>$("a.gallery-thumb").fancybox({

    afterLoad   : function() {

        $('.fancybox-wrap').css('top', '+=' + scrollPosition + 'px');   

    }

});
</code></pre>

<p><br /></p>

<p>Now your probably thinking why don't I just do this...</p>

<pre><code>$("a.gallery-thumb").fancybox({

    afterLoad   : function() {

        FB.Canvas.getPageInfo(function(info) {

            var scrollPosition = info.scrollTop;

            $('.fancybox-wrap').css('top', '+=' + scrollPosition + 'px');   

        };            

    }

    afterShow    : function() { },
    onUpdate     : function() { }

});
</code></pre>

<p><br /></p>

<p>OK - this works fine, but I need the <code>scrollPosition</code> variable in other fancybox callbacks like <code>afterShow</code> and <code>onUpdate</code>. But sure I can just repeat <code>FB.Canvas.getPageInfo</code> function... Not quite, I need the original generated value from when the gallery initial click was made.</p>

<p>So perhaps I have to do something like this, but I can't seem to get it to work, any ideas on how I can get the below script working?</p>

<pre><code>$("a.gallery-thumb").on('click', function (){

    event.preventDefault(); /* I'm trying to stop the image opening by default before my fancybox function runs */

    FB.Canvas.getPageInfo(function(info) {

        var scrollPosition = info.scrollTop;

        $(this).attr('rel','fancybox-thumb').fancybox({

            onUpdate   : function() {

                $('.fancybox-wrap').css('top', '+=' + scrollPosition + 'px');

            },

            afterLoad   : function() {

                $('.fancybox-wrap').css('top', '+=' + scrollPosition + 'px');

            },

            afterShow    : function() {

                $('.fancybox-wrap').css('top', '+=' + scrollPosition + 'px');

            },

            onUpdate     : function() {

                $('.fancybox-wrap').css('top', '+=' + scrollPosition + 'px');

            }

        });

    });

});
</code></pre>

<p>See js fiddle here emulating my problem of the fancybox function not firing...</p>

<pre><code>[http://jsfiddle.net/svsdx/1631/][1]
</code></pre>
