Making a non-trivial Image and Video Gallery with a really nice interface
- by Cawas
Short part:
I'm starting to build an Image and Video Gallery for our intranet. It's pretty much like an image gallery with video thumbnails that play on click. It's just good to keep that in mind because caching and streaming happen in very different ways there.
It will serve to browse our reference database, which will also contain searching, tagging and voting.
There are 3 features that I need to begin with:
Quick preview of thumbnails from each Gallery
Fast zoom in / out
Animated scrolling
Now to the long part, since I can't seem to reduce this:
I hope this question belongs here. Maybe people can read this through and identify with it, specially since I expect answers to be pretty specific.
The first plan was getting Apple's mobile me gallery as base, because it just so happens to have all those 3 features. If you've never seem it, you should check it out. Move the mouse over each collection and you'll get a nice preview "per pixel". Carousel got a really good scrolling, not just because of the pretty effect. I like it much more than cooliris, but it would be nice to have it in several rows, maybe without the magnifying effect... Then it could be all in the same place with the zoom.
The more the features blend-in together, the better. Zooming out with the mouse, scrolling by dragging, once the zoom is really out it becomes a browsing through galleries, with the quick-show preview of each, all properly cached and fast. That'd be perfect. A very compelling interface will be important in this project.
Well, my point here is just describing what I need and hope to hear from people with more experience in all that stuff of what's already done and what I'd have to do myself. And how (i.e. which framework to use) to do it.
To begin with, I've found a gallery demo and its source code (I think it was from here, but the link seems broken now). I guess it was made in SproutCore, which is what mobileme was based upon. Definitely with JQuery (which already seems a little slow). But I'm still missing two features there: the carousel and the fast zoom (it's just not as slow as the zoom in this demo with cappuccino).
Then I've found a supposedly better one with a pretty good and similar zoom, that I'm not sure if it's using any framework and is already in php. Right now it'd be better having just the HTML, no server-side, since I'm building interface first.
So, can anyone point directions? There are way too many options! Should I look for another solution closer to what I need, or try and tweak this one? I'm not familiar with any framework at all.
Sorry for bringing this question that I will have to answer myself anyway sooner or later and sorry that I couldn't make this smaller.
Thanks.
