January 6th, 2009
Flickr Flip Book
Flickr Flip Book is my new Flickr mashup to browse Flickr photo stream and view large photos with all the extra info, Photo Album style!
Flickr Flip Book Features:
- Flickr Tag Search prompt
- Flip Book animation with Photo Album pages displaying photos and extra photo informaion
- Detailed Photo Information: description, tags, author, number of views, date posted, comments
- Photo strip to navigate through the album photos and skip pages
- Tag clouds to view photo tags and perform a quick search of similar images
- Keyboard navigation to flip through photos and zoom in for a larger photo view
- Search by content or media type with some sort options: relevance, interestingness, date posted/taken
- Sequential and random slideshow playback
- Full screen view
Flickr Search Prompt
When you enter Flickr Flip Book, a typical Flickr text search prompt is displayed:
Just enter some key phrase of interest to search Flickr.
You can also pass the search text query via url using deep linking with the “text” parameter. For example, the following url will retrieve matching sunflower images on load, bypassing the initial Flickr search prompt: http://www.randomfractals.com/FlickrFlipBook/FlickrFlipBook.html#text=sunflower
Flipping through Pics
The Flip Book that simulates Photo Album with page flipping effect is not my original work, although I’ve spent a lot of time picking the most suitable visualization and tried a few different flip book components before settling on Ely’s Flex Book. The other flip book components I’ve evaluated just were not as flexible or had some serious sizing and animation performance issues on page resizing and the actual page flip.
To flip Photo Album pages you can click on the page corners, drap them to experience the full page flip effect, or use the photo thumbnail strip at the bottom of the Flickr Flip Book to navigate to the desired photo page.
Album Photo View
The Photo Album displays two pages per photo: Photo page on the left and Photo Information page on the right:
Photo Page
The Photo Page displays medium size photo from flickr, resized and enlarged to fit your screen resolution and browser window:
If you mouse over the photo image, you can view the photo title, number of views from flickr, photographer’s icon, link to the photographer’s photostream, and posted photo date and time.
Photo Popup
You can click on the photo image to see high resolution image or hit space bar key to show and hide the large photo image:
I’ve used Josh’s PopUpThumbnail component for this one, with minor adjustments to hide popup image on slideshow playback and adding support for the enlarged image aspect ratio and bitmap smoothing on popup. Turns out half of the Flickr images are of low-res, actually “medium” according to Flickr, with 500 px on the longest side.
Photo Information Page
The Photo Information page displays photo title, description, tags and comments.
Photo Description:
Photo Tags:
Photo Comments:
Discover New Photos with Tag Search
Flickr Flip Book has two tag search options:
1) Select tags on the Photo Information Page to search for similar photos. This is handy if you don’t know exactly what you are looking for. Most photos on flickr have 10-20 tags to pick from. Just select the most interesting tags and click search:
2) The toolbar at the top has a link to the Album Tag Cloud that displays all tags for the current photo set:
Search Options
The top toolbar also has a link to the Search Options dialog, located under the text search field. There is not much there yet, but a good start to get some basic search and sorting going:
Keyboard Navigation
You can use arrow keys to flip pages and space bar key to show/hide large photo popup.
If the app looses focus, just click on the photo strip to regain keyboard navigation functioanlity. I am still looking into this issue.
PhotoStrip and Slideshow Playback
Flick Flip Book uses the same photo strip navigation I’ve used for Flickorama at the bottom of the application window, with options to get next/previous photo set and Play sequential or random slideshows:
See my Flickorama update post for more info on the Slideshow PhotoStrip.
Slideshow playback in Flickr Flip Book is really cool. Just fire it up and see those pages flip.
Let me know if you encounter any problems.
looks nice pretty how could i get source for this component?