I like the look of Flash galleries. But I want my site to not be Flash so its searchable and linkable. I like the look of Lightbox and Slimbox (especially once you speed up the delays), but you can't easily link to a specific image in an album. What to do?
I toyed around with doing a Lightbox/Slimbox theme for ZenPhoto, but kept running into some issues. An important one for me was I wanted whatever JavaScript magic that was displaying the images to be able to handle a URL that could tell it to display a specific image -- I often want to email a link to a specific image.
Today I stumbled across Galleria -- a very cool JavaScript image display library. Check out the demo:
http://monc.se/galleria/demo/demo_01.htm#img/grass-blades.jpg
Nice, huh? Slick like Flash, but all JavaScript and CSS. So, after an little mucking about, I've got a ZP theme using Galleria.
This is very much not a finished work, but I thought I'd share it in its most vanilla form before I start customizing the theme for my own site. It's based on the default theme from today's downloads: ZP 1.1.5, and the Galleria 1.0b code.
Galleria/ZP theme Current Version v0.5:
http://alexwilson.dyndns.org/filez/galleria05.zip
Still a work in progress, but for anyone who wants to follow along, I've got it up on my live site:
http://alexwilsonphoto.com/gallery/
The trickiest part seems to be getting the interface to deal well with albums with a lot of pictures. I've got a few changes in that help a lot, including using the ZP-generated thumbs instead of letting the Galleria resize the full images to make thumbs, which seemed to really chug the browser on big galleries. Having the scroller area also removes the need to move the view once there are more than a row or two worth of thumbs.
Any feedback on the theme so far is welcome!
Galleria doesn't have the scroller area -- I added that, since having several rows of thumbs made the page a pain because you had to move back up to the image.
Changing the style of the scrollers is just a bit of CSS and pretty easy -- but it's an IE-only thing, I think. Auto-scrolling is trickier, I'll have to look at the JavaScript involved to do that.
I'm planning on making the theme source available once it's more-or-less done.
Nice work, will keep an eye on it for possible future use. :)
AlexWilson, for the scroll bar at the bottom you might be interessted in this here: http://sorgalla.com/jcarousel/ (done with jQuery)
Cool, thanks for the pointer to that. I've updated my site with a very preliminary jcarousel integration.
I want to get the carousel to follow along the correct image when you use the image or top link to navigate, but haven't tried to implement that yet. I've got about a 800 more images I want to sort through tonight so I can do a mass update to my site, then I'll take a stab at it. :)
jayray999: You might take a look at this: http://interface.eyecon.ro/demos/slideshow.html
(Interface is an extension to jQuery). I have already plans for adapting that...:-)
Hokeys added -- Found a script, and putting it in took about 10 seconds. I love jQuery :)
I don't have plans for a slideshow for my site, but it might be an easy enough thing to add (the carousel already has a timed autoscroller functionality), so I'll at least look at it once I get the major stuff done.
@alex: Wow, that's quick. One suggestion. When the viewer reaches the end of the current carousel stack, the next Hotkey press or mouse click should advance BOTH the carousel and the image. Currently
only the image gets advanced so the active image is not necessarily visible in the carousel below. This can be disorienting to the viewer. Thanks.
@acrylian: Thanks. As ever you are at the forefront of help and support.
Here's to an early release.
Thanks all, so glad you like it!
I've manged to get the follow-along with the bottom scroller working. It's a little hacky at the moment though -- I changed the Galleria script to prefix the index number of the image to the title, and then the scroller extracts that to figure out where to move to.
I think I fixed the issue of stuff jumping around in IE as you switch form landscape portrait images, but I still can't get the PNG transparency working in IE -- anyone have any insight?