Kimler Sidebar Menu
Local Weather
11°C
52°F
Site Tools
Randsco I.M. Contact (AIM)
Randsco Visitors: Count, Country, Time & What
There are 9 visitors.Click to see their country & what they're reading.
Randsco Readers - World Distribution Map
Subscribe: RSS, Atom & RDF XML Feed (via Feedburner)
Top 40 Search Terms
Sign our Guestbook
Read the Guestbook
Join Our Fight Against Email SPAM
Kimler News
Multiple, Historical Stock Quote Service
Randsco Site Map
Site MapAgain, this is something that I've been wanting to do for some time and I believe that a site map is necessary to help those people out that have a hard time figuring out what is what on our site. I'd like to think that our menu system is easy and will work, but some people just require a site map to figure it out. So ... here you go ... a site map. :)
About the Kimlers
about usThis is where visitors can find out about Randsco and the Kimler family. Who are we? How did we come to be? What motivates us on our adventures. It's kinda like the old "meet scott and rachel" section on our PCT WebPage, but this "about us" section will be a stand-alone page.
Random Photo (linked to blog entry)
Kimler Login Page
Search Journal
Journal Archives
Journal Categories
- (7)
- (4)
- (1)
- (4)
- (40)
- (4)
- (8)
- (9)
- (38)
- (66)
- (24)
- (75)
- (6)
- (16)
- (13)
- (26)
- (3)
- (23)
- (5)
- (25)
- (19)
- (30)
- (32)
- (14)
- (0)
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").
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). 
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)
- 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. 
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 ;-)
Just what I was looking for!
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.