Fixing Lightbox’s click handling issues

I keep seeing more and more sites implement some sort of Lightbox script to display images. Sometimes they do provide some nice eye candy – like in a picture gallery setting – but when misused they get in the way of regular browsing. They behave like modal overlays when improperly used (which is bad enough in itself), but what’s worse is that when you use shortcuts to try and open them in a new tab, they hijack the click and go into picture mode. It’s a common criticism.

The typical implementation uses standard thumbnails linked to their full-sized image file in a way that if Javascript is turned off you can still click and get to the image. This is great for accessibility, but that also means that these Lightbox-enabled images look and feel like regular links. Because of this, the expected behavior when a user command+clicks (or control+clicks in Windows) is to have the link open in a new tab. However, the browsers don’t have a special click event for these shortcut keys so when the regular click event fires, the Lightbox uses it to activate its own features.

This breaks default expected behavior so it should be fixed. Since there is no built-in way to detect keys held during a click event, I’ve come up with a simple MooTools script that detects if a key is held down when a user clicks on an element. We basically set flags for the modifier type keys which are set when the user presses one of the keys. Then we create a custom event that can detect if any of the modifier keys are set. Here’s the code:

(function() {
	var keys = new Hash({ 16: false, 18: false });  // Shift and Option/Alt keys
	if (Browser.Platform.win) { keys[17] = false; } // Control key
	if (Browser.Platform.mac) { keys[91] = false; } // Command Key

	window.addEvent('domready', function() {
		$(document.body).addEvents({
			'keydown': function(e) {
				if (keys.has(e.code)) { keys[e.code] = true; }
			},
			'keyup':   function(e) {
				if (keys.has(e.code)) { keys[e.code] = false; }
			}
		})
	});

	Element.Events.cleanclick = {
		base: 'click',
		condition: function(e) { return !keys.hasValue(true) }
	}
})();

We can then use this new event instead of the regular click event to ensure our Lightbox only opens when a “clean” click is performed, i. e. a click without modifier keys held down. Here’s an example.

$$('a.lightbox').addEvent('cleanclick', function() {
	// openLightbox();
});

Tags: , , ,


  • Its really cool, I came to know this really worth visiting, just bookmarked your site.

    http://gisnap.com/
    The place where fun never ends

blog comments powered by Disqus