We all like Lightbox, so here is a port of the Lightbox 2 project to YUI. For those of you who have never heard of Lightbox, it's a way to show a modal overlay with the content on the same page you're currently on rather than having to navigate to a separate page. Currently I support everything the Lightbox 2 project supports (which includes single images and grouped images and the ability to rotate through them). In the future, I expect
Click on one of the images below to see Lightbox in action.
Setting up and using Lightbox is quite simple. You need to download the necessary files, which can be found here or you can pull them from Github.
gallery-lightbox-min.js file as well as the css and images that go with it.
The first step is to get those files and put them in the correct location. From there, you can add the following snippet of code to your page and you're all set:
After this, you just need to add
rel="lightbox" to links that you want Lightbox to open. Keep in mind that for now Lightbox will only handle images as of right now (support for arbitrary content is coming).
If you want to group related images together, that's simple. You just need to add a grouping to the
rel attribute with the grouping in brackets. So
rel="lightbox[grouping]". Here's an example:
A download is available from Github here.