Kimler Sidebar Menu
Kimler Adventure Pages: Journal Entries
Can you add figure numbers to Photo-caption zoom thumbnail images? Sure! What's the best way? I dunno. I had a play with some variations
A reader emailed, asking if there was a way to modify PZ3 to provide a figure number overlay, such that it showed on a thumbnail, but disappeared on hover. It sounded like an interesting modification, so I had a bit of a play with it, this morning and this is what I came up with.
There's a number of ways of doing this and I've shown the most straight forward here - "Figure 1" text that is centered over the thumbnail and disappears, when the image is zoomed (moused over).
For some other variations, including some fun with opacity, read on ...
I recently had to fight with CSS for a web page served in Quirks-Mode. What is quirks? Why is it bad? How do you tell if a page is in quirks-mode? All this (plus a couple of extra cents, tools & links)
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!)
Photo-caption Zoom v3 can fail in the latest Opera version (v9.02). It appears to be a problem with the Opera upgrade process. Learn mody ...
A Flip'n, Zooming Upgrade Problem
In fact, I wanted to test if further, by using it on our own website.
I uploaded the CSS and began modifying some XHTML, when I thought, "I'd better check, before I convert too much, that it works in all the browsers."
Low and behold, it didn't "Zoom" properly in Opera v9.02.
"That's odd," I thought, "I'm sure I tested it in Opera when I made the modifications."
Turns out, I did.
If you're experiencing problems with Photo-Caption Zoom v3 in Opera v9.02, read on ...
How do your printed pages look? When we saw that ours were horrid, Scott whipped the print.css file into shape. Read about the pros and cons of using CSS to make pretty print pages.
Using CSS to Format the Printed Page
Back in my office-working days, I knew a guy named Clint, who didn't like reading his email on the computer screen. He'd print each email, every morning, read through the print-outs, file the important messages and deep-six the others. I wonder if he still does that?
Who really reads online stuff, offline? Not me!
But who am I to criticize and judge others in their efforts at deforestation, eh? Isn't the Internet is supposed to be accessible to all - even folks who prefer reading online content, offline?
For accessibility reasons, innate curiosity and the shocking discovery that our printed pages looked horrible, I decided to spend some time and pretty them up. If you think visitors might want to print your blog articles (for reference or offline reading), then think about using Cascading Style Sheets to format the page.
Read on to see what a difference it made to our pages...