Kimler Sidebar Menu
Kimler Adventure Pages: Journal Entries
Christmas Photo Gallery
Have a look at my first pass attempt to find a pure-CSS photo gallery that be displayed with in-line text. Display as many images as you want to impose on your visitors! Demonstration uses family photos from Christmas photos
First-pass at a Pure-CSS PZ3 Photo Gallery
Around Christmas, I had an idea for a way to display a multitude of images in a pure-CSS photo-zoom gallery, utilizing Photo-caption Zoom v3 (PZ3).
Many people like PZ3, but some try to use it to build a photo gallery. I designed it to add zoomed images (and an optional caption), into XHTML pages. While it works great - is easy to deploy, saves page real-estate, looks nice - it doesn't handle multitudes of images very well (at least, not "out of the box").
I've finally taken the time to play with it a bit (it took most of yesterday morning to hack through the details ... and then most of the afternoon and night to put it all together into a demonstration).
If you're into CSS, like PZ3 ... or want to see 40+ family Christmas photos ... read on! (Dial-up visitors beware ... image data ahead!)
Design, Deployment & De-Photo Gallery
Using the gallery is easy! Just move your mouse over an image and it will zoom (pop, explode, enlarge) above the row your mouse is on. It will be centered on the full page (overlaying the sidebar, if necessary). Move your mouse left, right, up or down to see the photos.
Kimler Kristmas 2006
PZ3 Photo Gallery: Take One
Benefits, Considerations and the Future
Finally, a pure-CSS, XHTML-valid, liquid-designed method of displaying a bunch of images, which doesn't detract from in-line textual data! While I really like Stu Nicholl's work over at CSS Play, especially his superbly styled lightbox, I find his cutting-edge work difficult to deploy and designed for a fixed-width layout.
The first-pass PZ3 gallery has the following features:
- valid CSS and XHTML (standards-compliant)
- one image file (thumb and zoom are same image)
- integrates into existing PZ3 pages (other PZ3 photos still work)
- liquid design (screen resolution independent)
- easy to deploy (no special IE-only style sheets required)
- cross-browser capable (ie6,ie7,FFox1.5,Opera9 - tested)
- multiple aspect ratios (images don't all have to be same size)
- image centering (maximizes viewing for low resolutions)
The code could easily be modified for photo galleries having thumbnails clustered together (left, right, top or bottom), with high-quality zooms that display on top of a background logo, which is placed in the center of a 'viewing area'. An infinite number of galleries could be linked and styled in this manner. If I have time, I'll try to make a demonstration to show the capabilities.
Of course, the big consideration for me, was that the gallery be easy to deploy and integrates with the existing PZ3-HotSpot, PZ3, PZ2 and PZ1 code (I want it to piggy-back off of PZ3 and not break any preceding or derivative works).
While these features are nice, there are some considerations when deploying it. Handling multiple image aspect ratios requires extra CSS selectors, to handle 50px incremental differences in image width and height. I don't like this, but (at present) don't know a way around this requirement. It would be a lot easier to use similarly sized images (and the thumbnails would deploy "nicer" too ... the gallery block would have a clean right edge, rather than the ragged edge you see here). Using only one image file is convenient, but because all image data are loaded with the page, one must balance the quality of the image, zoomed image size and the total number of images, to keep load speeds reasonable. (Another option is to link the thumbnail to a super-high resolution image, which would load in a new page.)
What more do I want? For one, there currently is no caption option (doesn't seem right for a "photo-caption zoom" does it? ... no!). I'll have to add one later, which is why I've left the PZ3 caption code in the XHTML for this demo. In lieu of a caption, this demo makes use of the thumbnail ALT attribute - not perfect, but it's there.
If I had more time to play, I'd test some other alternatives, but alas ... with a 3-year-old, 5 acres of land, wood to chop and other websites to work on ... I'm not sure when I'll get the time.