Kimler Sidebar Menu
Kimler Adventure Pages: Journal Entries
PZ3 Figure Numbers
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 ...
For me, the text overlay on a thumb is a tad "confusing". There is no differentiation between the figure number and the thumbnail image ... they both look one and the same. Maybe that doesn't bother you, but I thought it might be better if there was a way to fade the thumbnail, so that the figure number became more prominent.
I don't do much with opacity, but now that IE7 is out (and understands opacity in PNG image files), I thought I'd give it another look. At the end of the day, opacity is fun, but requires either proprietary CSS or a still-under-development CSS3 directive (both currently invalidate the CSS on the page).
Here, both the browser-specific CSS for Internet Explorer ("filter") and future CSS3 directive ("opacity) are WERE used to provide opaque viewing for Opera, IE and FireFox browsers. (Commented out for W3C CSS2 validation. Opacity 'works', but IMO - because it's not yet supported as a standard - it's not quite ready for 'prime time')
It's an interesting option and when CSS3 is implemented (and if opacity is a supported) I might play with it more, then.
Another option, would be to NOT SHOW the thumbnail and just show the figure number. Then, on hover, the image would zoom, with the caption and BLAMMO ... there you go. A tad startling, but easy enough to do (just assign a background color and border to the figure number <SPAN>
Hmmm ... that other option is a tad startling and LARGE. Maybe it'd be better to shrink it all down, so that it didnt' take up so much room on a page
Okay ... that doesn't take up much real-estate! Of course, if we took it to it's radical culmination, I suppose that we could just convert the whole thing to just a How about that?
This will take some more work ... as Internet Explorer still thinks something is a block level and puts the link on the next line.
Image placement would be an issue, even if the block/inline CSS were sorted. (Not as big of an issue for non-liquid layout, but with a liquid layout, there would be no telling where the link text would be sitting ... could be left side, center or right side of document).