Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

random top 40

PZ3 Figure Numbers

Filed in:CSS

PZ3 Figure Numbers

April 22nd, 2007  · stk

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

Michelle Goodrich wrote a good article, "Exploring Opacity" at Manderin Design, which I utilized as the sole source of information in my own exploration.

Here, both the browser-specific CSS for Internet Explorer ("filter") and future CSS3 directive ("opacity) are WERE ARE AGAIN 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')

Nov 2007 - LOL. I've been all over the map on opacity. I finally decided to use it. One can use the CSS3 specification directive "opacity:##" and serve the proprietary "filter" rule to Internet Explorer (only), via an IE conditional, so the majority of browsers will render it. Then, by validating the CSS to the CSS3 specification, the CSS will validate. Bing-batta-boom ... opacity on websites. It should also be future-proofed, too, assuming the CSS3 specification is finally adopted and becomes the new 'standard'.

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? :p

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

EDIT Well, LOL ... I've sorted the liquid layout positioning, but am still having a difficult time with inline positioning ... (a) keeping it all "inline" in an unhovered state (IE) and (b) holding the DIV open in a hovered state. :p


Views: 18242 views
2 Comments · GuestBook
default pin-it button
Updated: 6-Aug-2008
Web View Count: 18242 viewsLast Web Update: 6-Aug-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 Dav4is Comment
Nice work!

I think it important to have the thumbnail visible behind the figure number overlay. That will help folks find what they're looking for if they already have a picture in mind. The figure number, of course, is important to allow keying to the accompanying text.

Perhaps the figure number overlay could be smaller and be placed on a small rectangular patch of contrasting (opaque?) background color? That would help distinguishing figure number from the image.

2.flag stk Comment

I agree about the visible cue, which is why I never considered "figure numbers" (the thumbnail content obviates their need, in most cases).

What you suggested (smaller overlay on contrasted background) is entirely doable ... just style the <SPAN> to your heart's content!