StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POFire fancybox function inside a onclick? Simulating the normal fire
text
Body
copied!<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>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload