Little Lightbox_me quirk

Using the excellent Lightbox_me jQuery plugin the other day I came across an interesting quirk. When you lightbox an element, Lightbox_me moves that element in the DOM to a container it creates to lightbox it, but when you close the lightbox it doesn’t put it back where it found it.

The Problem

In my case I was using jQuery’s find function to look inside the clicked element’s parent to find the element I wanted to lightbox. This was because I had multiple elements on a page I wanted to lightbox, so I started with something like this:

$('.button').click( function(){
	$(this).parent('.container')
	.find('.lightbox')
	.lightbox_me()
});

Which worked fine when you clicked on the button the first time, but if you closed the lightbox and clicked the same button again, nothing happened.

The Solution

After prodding about for a while I noticed that Lightbox_me was moving the .lightbox element from the .container element, sticking it in another div hidden at the bottom of the DOM, and crucially, leaving it there after the lightbox was closed.

Obviously this meant when the jQuery looked for the element in the parent a second time, it wasn’t there. So the solution was to change the markup so the trigger had a rel attribute that matched the targets ID, meaning it could be found wherever it was in the DOM.

HTML:

<div class="container">
	<a rel="my-lightbox" class="button" href="#">More info</a>
	<div id="my-lightbox" class="lightbox" style="display: none">
		Lightbox content
	</div>
</div>

JS:

$('.button').click( function(){
	$('#'+$(this).attr('rel')).lightbox_me();
})

My thanks to Justin Perry for helping me troubleshoot this issue.

Hello toggles, goodbye sprites

No, not that kind of Sprite.

Before today, if you visited my site on a device with a high resolution screen, like the iPhone 4, you would of seen some blocky icons in the header made with an image sprite. Which was something that always really bugged me.

When Apple announced the retina display they introduced the -webkit-device-pixel-ratio media query to WebKit, the rendering engine used by Safari, Mobile Safari and Chrome (amongst others) to detect higher resolution displays. I could have used that media query in my stylesheet to serve a higher resolution sprite to visitors, or just served a higher resolution sprite to everyone.

Instead I opted to use an icon font, which has a number of advantages over rendered images:

  1. They’re vector based so can be scaled to any size without an increase in file size and look great on higher resolution screens.
  2. They have transparency that works properly in IE6.
  3. They can of course be styled with CSS properties like text-shadow, color or rotate.

There’s one small Gotcha with Firefox: it won’t load cross-domain font files. This confused me somewhat as it worked when I tested it locally, but not on the live site where I use a CDN. The solution was to encode the fonts as Base64 in the stylesheet, which has the added benefit of saving a http request as well.

Toggles are nicer than buttons

Ok, buttons are still cuter.

This is as true of duffle coats as it is web design, which is why the second feature I’ve added is a toggle on my portfolio to switch between a two and four column layout. I spent quite a while thinking what combination of jQuery UI modules it would need before I realised I could just do it with a CSS3 transition.

The toggle itself is just a <button> element styled with a background image and a couple of lines of jQuery that switch the class on the button and column containers when it’s clicked. I probably spent more time getting the toggle image looking just right with drop shadows and gradients in Photoshop than I did on the CSS and JavaScript.

To see how many people use the toggle I’ve attached a Google Analytics event that gets triggered every time it’s clicked. At the moment it’s just some simple code that tracks clicks, but in the future I might add some logic to see which layout is more popular. I’m not sure how I’d remove the bias towards the initial layout though, maybe with some sort of randomisation.

It’s always good to try new things out on your own site, so when a client asks for them you can point to live demo of the technology and you know how to implement it.