Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

random top 40

Introducing: Photo-Caption Zoom 2

Filed in:CSS
Site News·b2evo

Introducing: Photo-Caption Zoom 2

June 15th, 2005  · stk


The images on your left are a demonstration of the new and improved Pure-CSS PZ2 "Pure-CSS Photo/Caption Zoom (Version 2)".

The images expand upon mouseover, displaying a larger image and corresponding caption (just like the original), but this advanced version won't distrupt the flow of the XHTML page.

As I learn more about CSS, I've tried to improve upon the original Pure-CSS Photo/Caption Zoom (or PZ as a certain someone from India likes to call it!)

This is the third attempt now, and "by jove", I believe I've got it! (Of course, I'm referring to the holy grail of Photo Zooms ... the OVERLAY method - where the image doesn't jolt/shift/migrate/move the text and surrounding elements).

The technique employed here is not without it's eccentricities, as it is not nearly as easy to deploy as the original. However, it remains much more user-friendly than it's progenitor - "Magnify Image", which requires the use of two image files. In contrast, PZ2 uses a single image file, saving both bandwidth and headache - and of course - adds the capability of a nicely styled caption.

Compared to the original Photo/Caption Zoom, PZ2 requires the use of an extra <div>, prior to the normal PZ code. Why? Because the only way to keep things from shifing is to use "position:absolute" (which removes the element from the document flow). However ... this doesn't really work for showing the un-zoomed image (as it would overlay the text). So ... to overcome this problem, one can place an empty <div> (sized to the photo) UNDERNEATH the "absolutely" positioned image. Boom. Text can be READ!

Of course, in order to place the empty <div>, one needs to know it's dimensions. Sadly, width is not enough. So ... whereas the original Photo/Caption Zoom utilized ONLY width, PZ2 requires the height (only the thumbnail height and it's entered directly into the HTML).

There is another idiocyncracy of this second version and I blame it COMPLETELY on MSIE (as it isn't an issue with FireFox). The MSIE problem: they (currently) don't differentiate between the z-index of an un-hovered -vs- hovered element. WHAT? The bottom line: To satisfy MSIE, each PZ2 image MUST be uniquely named and be assigned a z-index value greater than the image that follows, or it won't "overlay" that image.

Edit: A work-a-round to overcome this problem has been discovered and applied to the next version - Photo-caption Zoom Version 3 (PZ3).

This isn't a problem within the post, but becomes difficult to manage from post-to-post. Bottom line: don't place PZ2 images near the bottom and for images that expand to tall dimensions ... place them near the top.

One other thing. The overlay (position:absolute) method dictates that ALL images open from the upper left-hand corner. No big deal for images floated left, but for images floated right - be aware.

Edit: Not an issue in the next version - Photo-caption Zoom Version 3 (PZ3).

I hope that this little demonstration has whetted your appetite for more, however, with the workload currently sitting on my desk, it will be some time before I'm able to properly document everything and make it available for public consumption (CSS code, XHTML code and b2evo-specific instructions).

Hang tight ... as I WILL get around to doing this. Check back periodically (or, if you so desire) skids can be greased via PayPal ;) (Just email to get the correct address).


Views: 38847 views
15 Comments · GuestBook
default pin-it button
Updated: 22-Feb-2008
Web View Count: 38847 viewsLast Web Update: 22-Feb-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 Inker Comment
Awesome stuff, I really hope you get to document it sooner rather than later. I post quite alot of images on our newly created family blog and so I could really use this.

I just hope once setup its not too complicated for my not-so-computer skilled family members to utilize.

Cheers Inker
2.flag stk Comment
Glad you like it!

Because of MSIE bugs, it's going to be longer than I was hoping.

The goal is to find a balance between functionality and ease-of-use. By necessity, it will be more involved than the original, but I still think it will be pretty easy.


3.flag Inker Comment
I see. Well take your time. Just wanted to let you know that I'm indeed interested in this.

Gosh, I wish I knew more about css.
4.flag Murali Comment
Hoya, thanks Scott. I'm swimming with the sharks (tax guys) here - not fun. Getting updated thru your Feedburner feed.
Love PZ2.

I'm sending you a detailed email on the activities this side of the planet.

Looking forward to having you folks here in Chennai anytime ...
5.flag Maggie Comment

My name is Maggie and I've been reading a bit about your Pure-CSS PZ2.

I think it's great! Is it available, and if so is it easy enough for a
newbie like me to install it correctly?

Thanks, looking forward to hearing from you!
6.flag stk Comment

Thanks for your interest in PZ2. Unfortunately, I developed it just prior to our summer holidays and it isn't finalized yet.

There are two problems with IE that keep it in 'development' mode. (1) failure to recognize multiple CSS class names (in certain situations) and (2) failure to change z-index on hover. (Neither is a problem for Mozilla ... surprise, surprise.)

I've found a solution for multiple class names, but the z-index problem remains.

The University of Alberta resumes in September and I'll be able (once again) to devote time to the project.

If you want to test drive it, you can right-click and copy the pertinent source, then go here to get the PZ2-specific CSS.

If you're a newbie, I'd recommend instead the original version, which is better documented and tested. (It pushes text to the side when the image zooms, rather than overlaying the text).

Hope this helps.


7.flag Jon Comment
Dude! This totally rocks. I'm about to update a pretty good sized slide show & the VP types at our university would just love it!
8.flag stk Comment
I have finally gotten around to finalizing the code and documenting it on it's own page.

Because of the complexities, I will (at some point) provide examples and instructions for installation, usage (along with some b2evo-specific stuff).


9.flag Hilary Comment
Amazing - I been looking for ideas like this and finally!! THANK YOU SO MUCH!!! Its wonderful, fantastic, awesome!!! We do alot of product/image displays and I wanted to find away for peope to skip seeing an image bigger on another page - THANK YOU - you have solved that!!!!

Now I need to figure out how you do the multiple images in a row, like you have here on "Photo/Caption Zoom 2".

The original one I learned from you using Photo-Caption Zoom CSS is great to show one image. But when I have two images side by side, like you have above - the blowup image of the 1st goes behind the small thumbnail image - showing both. I cant figure out how to get it to go above the 2nd image when blown up.

HELLLPPP - And thank you so much for doing this!!!
10.flag Hilary Comment
Ok I figured out how to do the above but the problem is still have the blow up picture showing up behind a thumbnail in the area the picture expands. I have two table rows each with a picture and below that another table row each with a picture - the above right picture shows up behind the bottom right picture when its expaned. I can not seem to get the top right picture to show above the thumbnail below it. Yet the left top picture does show above the bottom left picture thumbnail. Weird!!!

Any ideas??

PS Thank you again for teaching us - this is such cool stuff. I did see the normal photo caption zoom setup does not work in netscape communicator 4.7 on my macintosh. Not sure on the IBM. Anyone???
11.flag stk Comment
Put a link to page where you're having problems and I'll have a quick peek.

12.flag Luke Comment
One of the most incredible tools I ever seen on the net. Thank you 50 Billion times. You now rank up with Stu Nicolls as one of my favorite sites.

Thanks again.
Luke UK.
13.flag Keimzelle Comment
Great. Exactly what i´m searching for. I´ll try to use the photo zoom for the redesign of my portfolio site on february. Thx and greetings form Hamburg/Germany
14.flag Jonathan Comment
I am an amateur photographer who just made the jump to linux system and learning it's feature, trying to work mostly with low cost software or license free, like samba and ruby on rails etc. Thank you for this tutorial. Always wondered how it's done and searched on examples until I finally found this site. Will be practicing until I can get it right and when I do will gladly send a link to my website.

Keep up the good work
15.flag stk Comment

If you liked PZ2, you might want to look at the newer version - PZ3.