It displays a larger version of the thumbnail image our user has clicked.

It's relatively simple, it's all to do with folder structure. Inside the main 'Image' folder you will find a sub folder called 'Thumbs' Images/Thumbs/Img.jpg. When our beautiful users click on a thumbnail our script grabs the src of the image and split it by passing our 'Thumbs' subfolder as a separator src.split('Thumbs/'). This leaves us a path to the larger version.

We then grab Mr Big Image's src and say you now equal the split path that we just created.

I strongly believe in progressive enhancement so I used css3 transitions to handle the fade for modern browsers and offered a jQuery fallback for older ones.

The css3 works via class names being set on the parentElem once each transition has successfully finished. You will see the interval running that is constantly checking to see if our image has opacity to 0.

Due to the script relying on our folder structure I couldn't set up a fiddle to demonstate, but I have a working version at alanfewcompany.co.uk/dev/projects-southend.php.