Warning: this is a complex challenge.
Overview
A lightbox, in the context of computing, is a visual effect used in image sites. A list of thumbnail images is displayed; each image can be selected and will be displayed on top of the contents of the page either at full size or to fill the screen.
The task is to generate a (fairly) self-contained web page which will display specified images in a lightbox.
Input
The input will be from stdin and will specify (one item per line):
- The number of images (
n
) - A pattern for transforming an image name into its thumbnail (substitution described in detail further down)
- A list of
n
images, each consisting of a URL for the full-sized image and a one-line description. You may assume that each URL ends with an extension (e.g..jpg
), although you cannot assume any extension in particular.
Sample input:
4
*_thumb.jpg
DSCF0001.jpg
My family
DSCF0002.jpg
Other animals
crop/DSCF0017.jpg
Aren't they cute?
http://www.example.com/fx.jpg
The bestest picture on the whole Internet!!!
Note: when the URLs are relative (the first three in this example), you may assume that they are relative to the current working directory. This is probably only relevant if you want to load them in your program to find their sizes.
Substitution into the thumbnail pattern works by removing the file extension from the base URL and replacing the *
in the pattern. So for the four images in the example above, you would get
DSCF0001_thumb.jpg
DSCF0002_thumb.jpg
crop/DSCF0017_thumb.jpg
http://www.example.com/fx_thumb.jpg
If the pattern were thumbs/*.jpg
you would get
thumbs/DSCF0001.jpg
thumbs/DSCF0002.jpg
thumbs/crop/DSCF0017.jpg
thumbs/http://www.example.com/fx.jpg
The fact that the last one there is clearly nonsense would be a bug in the input rather than in your program.
Output
The output must include some HTML, and may additionally include some other files (e.g. separate JavaScript, CSS, or images). You may emit the main HTML to stdout or to a file named index.html
. Please state which you choose to do.
The HTML must include a doctype and be valid for that doctype (I suggest using HTML5!). When it loads, it must display the thumbnails, which must have some separation (margin or padding) between them, and should not be one per line. Each thumbnail must either have a title
attribute or be in an element with a title
attribute which displays the corresponding image description. It must also have an alt
attribute which is the same description.
Clicking on a thumbnail must open the lightbox. This consists of a translucent black overlay covering the entire screen, on top of which the following are displayed in a white rectangle with a padding of at least 8px
:
- The full image (scaled as required - see below)
- The image description
- Buttons or links to go forward and back, and to close the lightbox
It is up to you whether you overlay the description and buttons over the image or put them in the margin around it.
If everything fits within the browser's viewport with the image at full size, it should be displayed at full size. Otherwise it should be scaled down, preserving aspect ratio, so that everything fits.
The forward and back (or next and previous - your choice) buttons must load the corresponding images. It is your choice as to whether they loop or stop at the ends. There should be a simple but smooth transition between the images - if the (scaled) images are different sizes, then it shouldn't jump, and you should use some kind of fade or sweep.
The following features of many lightboxes are not required:
- Closing if the user clicks on the translucent black overlay
- Resizing everything correctly if the browser window is resized
Permitted external resources
Use of external resources is restricted to using at most one of the following JavaScript libraries:
- jQuery
- Prototype
- mootools
You may assume that it is in the same directory as the output html, but if you do so you should document the name which you expect it to have and the version which you require.
Compatibility
Compatibility with IE is nice, but this is a code golf, and apart from that it's not something which is easily tested without a Windows machine, so it is not a requirement. Please state which browser(s) you have tested with in your answer. I will test with Chromium, and I also have Firefox 3.6 and Konqueror available at home (plus various versions of IE, Win Safari and Opera in my lunchtimes at work, so if you want me to test on one of those, say so).
Note: this question has been sitting in the Sandbox for two weeks, so if you think there's a problem with the specification, please make it a habit to comment on questions over there.