Full Screen Image Gallery Using jQuery and Flickr
Posted Wednesday, February 25th 2009, archived from the original devkick blog.
I just finished off a small project I have been working on for a while on my free time. It's a full screen image gallery that automatically scales the image with kept aspect ratio to fill the browser background. I also spiced it up with a flickr search engine, thumbnails, captions, preloader and some other goodies.
This is not a lab open source project, so there is no documentation available and it's still under copyright. It basically loads image links one by one and replaces it with a full screen image gallery. It scales the image using CSS only (some JS for IE6) and I used jQuery all over. Just like Galleria, it preloads images in advance for super fast viewing.
Some features
- Flickr search using jQuery and JSON
- Full screen with kept ratio using CSS only
- A png raster to even out up-scaled jpegs
- Thumbnails with loader indicator and a nice hover effect that shows a bigger thumb (or description)
- A preloader loads the large images one by one for super-fast viewing
- Fetches the biggest image from flickr using their API
- Caption that can be turned on or off
- Navigate by clicking on either half of the image, or use the thumbnails
The live demo is gone; the project page is archived at /lab/fsgallery/.
This post documented a shipped gallery; devkick now keeps a public record of shipped projects on the builds page.