Ramblings Of A Web Guy
Brian Moon

Lightbox using YUI

I made this a while back but have not blogged about it. I needed a lightbox for a project. So, I looked around. Like usual, none of them were right for me. In addition to that, I am not on the jQuery band wagon. No particular reason. I just never latched on to the weird syntax (They made a function named $ so it could kind of sort of read like PHP, come on). Anyhow, not a jQuery hate post. I did however take a liking to YUI. It is more my style. Less magic stuff and more of a real library. I feel like I can use it where I need to and not use it when I don't. Again, not a YUI love fest post. Long story short, I chose to make my lightbox with the help of YUI. I have just uploaded the code to GitHub. Maybe someone else will find it useful. I have an example page as well.

Features
  • Lightbox and contents can be created via:
    • Javascript
    • Existing markup
    • Asynchronus (AJAX) request (contents only)
  • Lightbox will close when ESC is pressed
  • Rounded corners and box shadow using CSS3
  • Exposes an onClose event that can be subscribed to

Compatibility
  • Firefox 3.5+
  • Chrome 4+
  • Safari 5+
  • Internet Explorer 9 (Animation is not working due to YUI's lack of opacity support in IE9)
  • Internet Explorer 8 (Via IE9 in IE8 compatibility mode. No rounded corners, no shadows)
  • Internet Explorer 7 (Via IE9 in IE7 compatibility mode. No rounded corners, no shadows)
  • Opera 10.53
YUI Requirements
  • Dom
  • Event
  • Connection Core
  • JSON
  • Selector
  • Animation (if animate set to true)

Custom carousel with YUI and OOCSS.org

YUI has a built in carousel widget. However, it requires fixed widths for all the parts. That does not fit well in a liquid CSS layout. In particular, we have to support people using large fonts at the OS level and large font settings in their browsers. I did not want for our carousel to break down in these cases. The built in YUI widget does. See this normal sized screen shot versus one with large fonts. Now look at dealnews with normal fonts and large fonts.

So, I decided to make my own using YUI and the grid CSS from Object-Oriented CSS.  You can see my working example with some explination here.