Dynamically Calling Fancybox from Javascript

Fancybox is a really nice jQuery library for creating lightboxes. There are a few simple examples and some documentation on their site but there seems to be no demonstrated method for loading a fancybox dynamically with javascript. All of their examples require you to embed a link to the lightbox content somewhere in the page source.

The following hack, mostly taken from the method described here, allows you to dynamically any web page into a fancybox straight from javascript.

I've documented the following example which should be fairly straight forward. Basically it embeds a hidden link, that's controlled by the callFancyBox function. Make sure you have the right things included and you can simply call

{% highlight javascript %} callFancyBox( ); {% endhighlight %}

{% highlight html %}

Fancybox Test

A fancybox will load in 3 seconds

{% endhighlight %}
Related Articles