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.jpgNice, 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 
Zenphoto
Comments
One note: jQuery is already included in zenphoto (zp-core/js), so you don't need to include it in the theme.
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!
The only thing that does not blend in is the scroll bar at the bottom. I have not looked at galleria, but can you have some sort of auto-scroll depending on the position of the mouse?
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.
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.
(Interface is an extension to jQuery). I have already plans for adapting that...:-)
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.
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.
Let's get this working well and include 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?
http://alexwilson.dyndns.org/filez/galleria05.zip
Live:
http://alexwilsonphoto.com/
As for the IE6/PNG problem, I figured out why pngfix.js wasn't working -- it just runs once on page load, so it doesn't help with dynamically loaded images like jCarousel. Right now, IE6 makes about 30% of the browsers -- sizeable, but I'm probably going to ignore that problem for a bit. The easy solution at this point is to just make non-transparent arrows the match my background.
I've also seen intermittent problems where the thumbs load up in the jCarousel scroller either stretched or at a funny offset. Not sure what the cause of that is, I've only had it happen in IE on my machine, but I've seen in in both IE and FF on others. Odd. Any insight from anyone on how to solve that would be most appreciated.
Other than that, things seem to be working well. A few other notes/warnings:
-I haven't yet really cleaned up the code at all, so CSS is spread all over the place, hardcoded links, hardcoded image sizes, etc.
-Don't expect image.php, archive.php, or search.php to look nice or maybe even work -- I'm not using them on my site at the moment, so I haven't touched them.
-I've got my gallery set to use 600px images, and 85x85 thumbs.
-I also have the images and subalbums per page limit set to 999.
-Comments, ratings, and search are off. You'll also have to keep it set on the dark theme colour setting.
I try it and everything is ok with ie, but with firefox i've got errors when i try to change photo (when i click "next" i've got an error in the url (i've got in the url "#undefined" instead of "#img002.jpg").
And you missing to join "jquery.hotkeys.js" on your package
Sorry for my bad english !!)
Thanks again, and I hope you will be update your theme !
You can grab the hotkeys script from here until I do my next update:
http://code.google.com/p/js-hotkeys/
You can see the bug on this adress:
http://www.titou.biz/testzen/Tour_du_Viso/Viso5/#/testzen/albums/Tour_du_Viso/Viso5/viso_ 2007-08-02_14.39.38.jpg
when you click on "next" or previous, you have the error.
With IE it's look ok
But again, it's a beautiful theme ! Congratulation!!!
Is google maps compatible with this theme, or is it completely off or does it have to be changed alot. And yes, Comments are they off as well.
Great work with this one, keep up the good work.
Not sure how much work would be required to get comments or maps or other image-specific stuff working -- the theme is really driving off of album.php, and image.php isn't even used. That means I'd expect I'll have to jump through some hoops to get any image-specific stuff working. I'm thinking it'll meaning storing all that sort of info in JavaScript -- possibly making a custom callback function that the image switch event can call and then re-populate areas of the page as needed.
Boo hoo, I'm not seeing any images, just black "thumb squares".
Thanks.