StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The <a href="http://fancyapps.com/fancybox/#docs" rel="nofollow">fancybox API</a> provides a number of event based callback functions for interacting with the fancybox elements, before, during and after the box is <code>shown</code> or <code>loaded</code>. This allows you a lot of flexibility.</p> <p><strong>I would use the <code>afterLoad()</code> callback function within the <a href="http://fancyapps.com/fancybox/#docs" rel="nofollow">Fancybox2 API</a>.</strong></p> <p>See this fiddle i put together: <a href="http://jsfiddle.net/qtzLT/45/" rel="nofollow">Fancybox afterLoad() callback to return a function</a></p> <p><em>This is just my solution, I am still very much a student of js, so I can't say this is the <code>best</code> way, and I welcome feedback or edits.</em></p> <p>Basically we will use the <code>afterLoad()</code> API function of fancybox so that upon successful load of the fancybox element driven from your successful <code>$.ajax</code> call <strong>a function is returned to then listen to the click event of an element loaded into your fancybox</strong>.</p> <pre><code>$.fancybox(echoData, { // fancybox API options fitToView: true, openEffect: 'fade', closeEffect: 'fade', afterLoad: function () { return fancyUpdateMyWay = function () { var a = Math.random(); var newHtml = "<h4>UPDATED=" + a + "</h4>"; $("#fancyResult").html(newHtml); } } }); </code></pre> <p><strong>Note:</strong> I imagine that you will want to do further ajax calls from within the fancybox results, and here I only demonstrated a simple <code>DOM</code> update from jquery.</p>

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