Running Calendar change from Facebox to Colorbox

Posted September 8th, 2011 in Case Studies and Javascript

I made some updates to my New Zealand Running Calendar website last night to move from using the Facebox jQuery plugin to use Colorbox instead. I used Colorbox recently on another project and found it much easier to work with - I've typically had to hack Facebox to make it work right - and for a couple of reasons decided to add it to the running calendar website.

Screenshot before - using Facebox

The first screenshot below shows the popups using Facebox. The website has a calendar list and when clicking a running event the content is opened into the popup instead of a new page. This makes it easy to look at several events without having to go back and forward between pages.

 

Screenshot after - using Colorbox

The second screenshot shows it as the site now works using the Colorbox plugin. The content for Facebox used an AJAX request but with Colorbox it loads in an iframe instead, which means I've been able to retain ads in the popup.

The other nice thing with Colorbox is that links with the same rel property can be grouped together so the user can navigate through them using the left and right arrow buttons at the top of the box (or even with the left and right arrow keys), again making it easy to look through a number of events at one time.

Colorbox Plugin

Visit the colorbox website for more information about this useful plugin and to download it. In a later post I'll look at some of the cusomtizations I have done using hooks, settings and window resize handlers to make it work just how I wanted.

Running Calendar website

Visit the running calendar website to see my implementation of Colorbox in action.