Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

random top 40

Christmas Photo Gallery

Christmas Photo Gallery

February 21st, 2007  · stk

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

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").

Until now.

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). :D

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.



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)
  • pure-CSS (no javascript required)
  • 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. :(

Views: 59108 views
18 Comments · GuestBook
default pin-it button
Updated: 25-Nov-2008
Web View Count: 59108 viewsLast Web Update: 25-Nov-2008

Your Two Sense:

XHTML tags allowed. URLs & such will be converted to links.

Subscribe to Comments

Auto convert line breaks to <br />

1.flag Brad Comment
Nice fix for us image gurus!
When and IF you do check my site, please be patient, full credit will be given when editing time permits. Edited version is clean of credit due to an Op failure ;-)
2.flag Tony Pritchard Comment
Thanks. Hoping to incorporate this into my site soon.

Just what I was looking for!
3.flag Patrick Comment
santa brought me adobe cs3 for christmas, i'm an old guy so this stuff is just fun for me. this is truly awesome. i fool around with ebay html for my wife and i can't wait to figure this out. great pictures...simply amazing stuff you guys do with computers... good day!
4.flag stk Comment
Brad, Tony & Patrick - Glad you like this "first pass" (not that there have been many more passes).

I did experiment with a caption version, which provides different styling, in addition to captions.

I came up with a different technique, altogether, by keying off a text-link, rather than an image link. I call it PopInfo.
5.flag Joe Comment
Is there code for this? I'd like to use it
6.flag stk Comment
Joe - There's two answers to your question. (1) It's not quite ready for prime time and (2) If you have to ask, then you're not ready. ;)
7.flag Joe Comment
I've been waiting a while and need to use it soon... anything I can use to test?
8.flag Yabba Comment
Hi there Joe, I normally find the best way to test how something will work on the web is to create a file in my drag 'n' drop editor of choice and then save it with a html extension ( normally availabale from the drop down) ... then I email it to a web savvy mate of mine who puts it on summat he refers to as a server. After that I click the link that he emails me and go "WOW he's so cool it hurts my brain to comprehend how he does this stuff with such ease"

9.flag Gary Comment

10.flag Yabba Comment
Yer just smiling because I *am* that muppet that you email your front page files to :|

11.flag Gary Comment
....That was a long time ago! ;)
12.flag Franky Comment
Incredible work, bet some sweat flew !
I sure am going to use a sligthly changed style of this impressive work on my site (if there's some spare time left 4me).
Thank you !
13.flag Amiee Comment
I think this is really neat, I'm not much into web design however I'm trying to put a website together for my marketing business. I wanted to use something like this for my portfolio page. How do I put it together? Is there a code I should download to I just view your source and edit??

Any help would be very much appreciated! Thank you!
14.flag stk Comment
Aimee - The album is meant to be a spin-off of the normal PZ3, so the album can exist on a page, or a website, that uses PZ3. (i.e., there's a bit of extra CSS to defeat some of the normal PZ3 actions).

However, one can just view source on this page to pull the PZ3.css ... and the gallery code. There's also this gallery page, which might help you isolate the CSS and the XHTML you need to duplicate this technique.

Please keep in mind that our copyright rules allow one to use our techniques for free only on personal pages. If you end up using PZ3 or the gallery for your website, you'll need to donate to the cause. (Likewise, if you have difficulty deploying the cutting-edge CSS, you can always hire us to help you.)

Hope this helps.
15.flag James Comment
Using IE8, the images don't close after preview, and some of them stay on the top layer so others open beneath them and are not viewable.
16.flag stk Comment
James - I'm thinking it's something to do with your local setup b/c I'm using IE8 (8.0.6001.18702) and the Christmas gallery, in this post, is working normally. ;)
17.flag Fahime Comment
Your images are nice. I am Iranian & like this celebration. It is very intersting & I want to see images about (I think) Noel papa or your street during this holidays. Thanks a lot. HAPPY NEW YEAR!
18.flag stk Comment
Fahime - Thanks! Glad you like the photos. Happy New Year to you too! (We don't get very many Iranian visitors!)