jQuery Picture Board

View Demo

I’m very much looking forward to the World Cup this year, which reminded me of the fun I had during the last one four years ago. I remember organising a Question of Sport style quiz for my fellow colleagues, which gave me a great chance to try out some JavaScript that I had learned. One round involved the creation of a picture board, which is divided up into squares, and users can click on the numbers to reveal a portion of an image underneath, similar to the Picture board on Question of Sport, but more like a game of Catchphrase. It got me thinking: what would I do now I am armoured with all this jQuery goodness?

Inspired by Aayush Shastri’s image flip, I decided to re-create the picture board using some cool animation. My approach was to use a simple list of links, which would each take the form of a square on top of the background image. The HTML and CSS are very straight forard, so I will not list that here. Instead, I will walk through my solution using jQuery.

Before I begin, it is worth highlighting that I am using an ordered list of links, and the hidden image is a background image on the <ol> element. I will take the following approach:

  1. Store the url of the hidden image
  2. Add an element to each list item, which will be used to display the hidden portion of the image
  3. then add the click events to the numbered square and the reveal element

So the first few lines set a few variables, allowing us to cache some jQuery objects for later use.

$gridWrap = $('#reveal_grid');
$revealImg = $gridWrap.css('background-image');
$gridWrap.css('background', 'transparent')
$sqrs = $('#reveal_grid li');

We then loop through the links in the list and add the elements, add some CSS rules to setup the hide/reveal.

$('#reveal_grid li a').each(function() {
	$num = $(this);
	$bgPos = $num.css('backgroundPosition');
	$num.parent('li').append(
		$('').css({
			backgroundImage: $revealImg,
			backgroundPosition: $bgPos,
			height:'0',
			marginTop: ($num.height()/2) + 'px',
			opacity:'0.2'
		})
	);
});

Next we need to add the click events, which just adds the flip animation that was based upon the original by Aayush Shastri:

$sqrs.delegate('a', 'click', function() {
	$sqr = $(this);
	$height = $sqr.height();
	$width = $sqr.width();
	$sqr.stop()
	.animate({
		width: $width + 'px',
		height: '0',
		marginTop: ($height/2) + 'px',
		opacity: '0.2'
	}, 500, function() {
	$sqr.next('.reveal')
		.stop()
		.animate({
			width: $width + 'px',
			height: $height + 'px',
			marginTop: '0',
			opacity: '1'
		}, 500);
	});
	return false;
});
$sqrs.delegate('span', 'click', function() {
	$sqr = $(this);
	$height = $sqr.height();
	$width = $sqr.width();
	$sqr.stop()
	.animate({
		width: $width + 'px',
		height: '0',
		marginTop: ($height/2) + 'px',
		opacity: '0.2'
	}, 500, function() {
		$sqr.prev('a')
		.stop()
		.animate({
			width: $width + 'px',
			height: $height + 'px',
			marginTop: '0',
			opacity: '1'
		}, 500);
	});
	return false;
});

I am aware that this code could be streamlined somewhat, but it made sense to structure it like this for demonstration purposes. In terms of performance, it seems fine, so I will leave as is for the time being.

Tagged as

Subscribe to the RSS feed

Leave a Reply

css gallery