Tag Archives: lightbox

How to Close a FancyBox via a Button Click CodeUnit 03 SEP 2012

The excellent and rather flexible jQuery plugin FancyBox has become my defacto jQuery lightbox implementation and as such it has found its way into most of my project work.

Although you can obviously close the displayed lightbox by either clicking outside of the box (i.e. on the greyed out area) or by clicking on the Close icon/button on the border of the lightbox, it is sometimes useful to be able to close the FancyBox by clicking on a button or element being displayed within the dialog – in other words when the FancyBox is being used to display iframe content.

Now the API for FancyBox reveals the existence of a close() function, which is called as follows:

$.fancybox.close();

This is useful when you want to programmatically close the lightbox, say after a certain period of time has elapsed – or in our case, when a button displayed in the dialog is clicked on.

However, there is one little trick that has to be employed here. Because the button sits within the FancyBox already launched, you need to ask its parent window to actually run the close function to shut it down.

Hence, your call from the displayed iframe content would look like:

if (typeof window.parent.$.fancybox!='undefined'){
           window.parent.$.fancybox.close();
         }

Nifty.

Related Link: http://fancybox.net

jQuery: FancyBox image display CodeUnit 10 DEC 2009

There’s another great jQuery lightbox plugin making its rounds at the moment, and this one’s a doozy it would seem! FancyBox is a well-coded, nifty little image lightbox jQuery-driven script that can be used to either display images, html content or even multi-media in a Mac-style “lightbox” that floats over the currently displayed web page.

Features include a nice drop shadow under the zoomed item, the ability to group items together by adding navigation (aided by preloading of images) and the ability to display the lightboxed content either inline, with ajax or in an iframe. Of course its display can be extended and customised through various settings and CSS and it does support some fancy transitions thanks to its use of the easing plugin.

And yes, just in case you are wondering, there is a WordPress plugin available for it! :)

fancybox-screenshot

Related link: http://fancybox.net/home