A fun little javascript exercise. These are the rules:
- The page that the lightbox lives on should be 2000px tall.
- On page load, the lightbox should start with an outer width of 800px.
- It should always be vertically and horizontally centered in the viewport.
- The six boxes at the top of the lightbox are images.
- As the user scrolls down the page, the width of the lightbox should shrink such that just as the user reaches the bottom of the page, the lightbox is one-third the width it is when the user is scrolled all the way to the top of the page (by this point it'll be very tall and ugly). So you can think of the scrollbar as a width control for the lightbox.
- As the width of the lightbox shrinks, the images at the top of it should shrink proportionally.