Kimler Sidebar Menu
Kimler Adventure Pages: Journal Entries
Photo-Caption Zoom v3
Introducing Photo-caption Zoom (version 3)! If you liked earlier versions, you'll love PZ3. The IE z-index bug is squashed, no more image resizing, choose thumb sizes 'on-the-fly' & do it with 70% less code. The easiest PZ ever. This version does more, with much less.
EZ PZ3 - Better, easier, lighter.
Images in this article utilize the newest, third version of a pure-CSS image zooming technique I've named "Photo-caption Zoom" ( or PZ3 ). When you move your mouse over an image, it will 'zoom' to reveal a larger image with a caption. There are a variety of pure-CSS image zooming methods, but this was the first to combine an image with a caption. It saves page real estate, it looks nice and this third version is more robust and easier to use than ever.
Although the end results of PZ3 appear identical to the last version (PZ2), the underlying CSS methodology is completely different! PZ3 offers significant improvements over PZ2 and does it with nearly 70% less code. It does more, with a lot less!
PZ3 satisfies most everything on my original wish list for a photo-caption solution. This version is the culmination of over a year's-worth of trial & error, of CSS/XHTML learning & experimentation and of countless hours searching the Internet for existing solutions. The results of PZ3 speak for themselves.
- PZ HZtory -
Photo-caption Zoom is a pure-CSS, xhtml-valid technique that I developed over a year ago. It zooms a thumbnail image on mouseover, showing a larger picture with a caption. It uses a single, simple image for both the thumbnail and zoom. It's designed to be easily deployed.
- PZ1 - Jan 31, 2005: The original. It rearranges page flow, making room for the zoomed image and its caption. (i.e., one can still read the document when the image is zoomed).
- PZ2 - Jun 15, 2005: Version 2. The zoomed image overlays the document, which means that page elements no longer shift or migrate. (A IE z-index bug is documented and a work-a-round is achieved, which limits usage).
- PZ3 - Apr 11, 2006: This third version supercedes its predecessor - PZ2. The IE z-index bug that limits PZ2 has been fixed, it's 70% lighter (less code), and pixel-perfect thumb/zoom sizes are defined in the HTML. Basically, it rocks! It's so easy, I'm calling it EZ-PZ.
- PZ3 - 30-Jun-2008: Version numbers added (dated version numbers, starting with "v080630", have been added to the CSS file, so users can tell at a glance if they have the latest CSS/XHTML code)
CSS corrected to allow correct toggling of the caption (Cap|noCap option)
If you're new to the Photo-caption Zoom technique, I recommend you begin here, which has links to all the Photo-caption Zoom pages on this website and covers 9 different methods, in detail. (Even those that I investigated early on). Each has cut'n-paste CSS/XHTML code you can use on your own pages.
Collaborating to develop PZ3 proves that two heads are better than one. This code resulted from batting it back and forth, across the Atlantic Ocean, to my U.K. business partner and mate, ¥åßßå. I owe him a deep debt of gratitude for his efforts and the time he spent helping me. Thanks ¥åßßå!
(Items in RED are enhancements over PZ2)
• Valid XHTML code
• Cross-browser/Cross-platform compliant
• Single image for both thumb/zoom
• Nice-looking (customizable) caption
• Overlays document (no layout shifting)
• IE z-index bug: SQUASHED!
• No image resizing necessary!
• Thumb sizes defined on the fly!
• Toggle borders on|off
• Toggle link cursor on|off
• Toggle caption on|off
• Code reduced by nearly 70%
• Quirks-mode support
• 30-Jun-2008 - Version numbers added
• Easiest PZ ever - EZ-PZ!
The code is cross-browser/platform compatible: PC Browsers tested - MSIE (IE6, IE7 & IE8), Firefox (v1.5, v2.0 & v3.x), Netscape (v8 & v9), & Opera (v8.x, v9.02§, v9.x); winSafari; Google Chrome (v1 & v2); Flock (v1 & v2); Mac Browsers tested - Firefox, Opera and Safari (v2.x & v3.x).
To date, there have been no reported browser problems. Please comment on viewbility if you're using a different [O/S|browser] combination.
To get the code and learn more about PZ3, please continue ...
Get the Code
It's recommended that you begin by reading this post, because it contains all of the Photo-caption Zoom links, code, alternatives, examples, techniques, history and the original wish-list of features.
If you want to cut to the chase and get the latest PZ3, then you can cut'n-paste the XHTML/CSS from this page (Updated 30-Jun-2008).
I still haven't made time to put together a "How To" article, but it'll show up here, when it is complete.
In the meantime, the installation and usage is similar to PZ2 and you can probably use the PZ2 How2 article as a guide.
Some Fancy Examples
One of the nice things about Photo-caption Zoom, is that it can be used as the underlying engine for many different types of image zoom applications. While it was originally designed for deploying images (and captions) inside of inline text, on a valid-XHTML page, it has successfully been used on some of the following pages:
(1) PZ3 "Image-Maps": On one hand, why not have your image map reveal further information? PZ3 to the rescue. On the other hand, traditional image maps are invalid in XHTML v1.1 ... not when you use PZ3!
(2) PZ3 Photo Gallery: Many people love PZ3, but try to use it (out of the box) as a photo gallery. It wasn't designed for that and falls short. Have a look my first pass at a PZ3 Photo Gallery (improvements coming soon) helps to rectify that.
Keep in mind that ALL of these examples co-exist with each other - PZ3 image maps, PZ3 photo gallery, PZ3 images, earlier versions (PZ2 and PZ1) - without conflict! There's more to PZ3 than meets the eye. ;)
Our copyright policy is very straight-forward. Photo-caption Zoom code is FREE for personal use. If you plan on using it for commercial purposes (i.e., on a site that is intended to make money), then we ask for a donation or that you hire us to install it for you. Our goal isn't to get rich, but we believe it's appropriate to acknowledge the time & value that it takes to develop such a useful feature. We think this is a generous copyright policy and we appreciate your honoring it.
If you've deployed EZPZ on your personal or commercial website, we'd certainly appreciate a backlink. Here are some buttons we've made, that you could use (click to download):
Usage and Considerations
Here's the very short version:
• The "PZ3-l" classname floats an image LEFT. "PZ3-r" (RIGHT).
• Use Bdr|noBdr to toggle caption/image borders on|off.
• Use Cap|noCap to toggle captions on|off.
• Use noLnk|Lnk to change hover cursor for linked|unLinked images.
• The height/width of the DIV determines the thumbnail size. (You will need to be careful about keeping the correct aspect ratio).
• The width of caption is the width of the zoomed image and is set in the XHTML "PZ31cap" SPAN.
• Tables: PZ3 breaks inside an IE <table>. This should only affect a semantically-correct, tabular data display (i.e. - You shouldn't be using tables for layout).
That's it (in a nutshell). You might want to print this off, but using PZ3 isn't rocket science. It's really the easiest Photo-caption Zoom to use. :)