Kimler Sidebar Menu
Local Weather
10°C
50°F
Site Tools
Randsco I.M. Contact (AIM)
Randsco Visitors: Count, Country, Time & What
There are 16 visitors.Click to see their country & what they're reading.
Randsco Readers - World Distribution Map
Subscribe: RSS, Atom & RDF XML Feed (via Feedburner)
Top 40 Search Terms
Sign our Guestbook
Read the Guestbook
Join Our Fight Against Email SPAM
Kimler News
Multiple, Historical Stock Quote Service
Randsco Site Map
Site MapAgain, this is something that I've been wanting to do for some time and I believe that a site map is necessary to help those people out that have a hard time figuring out what is what on our site. I'd like to think that our menu system is easy and will work, but some people just require a site map to figure it out. So ... here you go ... a site map. :)
About the Kimlers
about usThis is where visitors can find out about Randsco and the Kimler family. Who are we? How did we come to be? What motivates us on our adventures. It's kinda like the old "meet scott and rachel" section on our PCT WebPage, but this "about us" section will be a stand-alone page.
Random Photo (linked to blog entry)
Kimler Login Page
Search Journal
Journal Archives
Journal Categories
- (7)
- (4)
- (1)
- (4)
- (40)
- (4)
- (8)
- (9)
- (38)
- (66)
- (24)
- (75)
- (6)
- (16)
- (13)
- (26)
- (3)
- (23)
- (5)
- (25)
- (19)
- (30)
- (32)
- (14)
- (0)
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.
Morning Light: The lowest lake in Pioneer Basin (John Muir Wilderness, CA) only a few miles from the PCT. EZ PZ3 - Better, easier, lighter.
UPDATE: 10-Mar-2007 PZ3 Enhancements & Fixes made (see red text w/yellow background, where applicable).
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 - Mar 10, 2007: Fix for an IE7 BUG (multiple right-float images) and a work-a-round for quirks-mode problems.
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.
Afternoon Light: The same Pioneer Basin view, looking toward 3rd & 4th Recess, later in the day. 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 ¥åßßå!
Feature List
(items in RED are PZ3 enhancements)
• Valid XHTML code
• Pure-CSS (no javascript)
• 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%
• 10-Mar-07 - Quirks-mode support
• Easiest PZ ever - EZ-PZ!
The code is cross-browser/platform compatible: PC Browsers tested - MSIE (v6.sp2, v7), Firefox (v1.5, v2.0), Netscape (v8), & Opera (v8.x, v9.02§, v9.10, v9.24); Mac Browsers tested - Firefox, Opera and Safari (v2.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 10-Mar-2007).
Installation
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. ;)
Copyright
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 have any questions or wish to deploy any of our code on a commercial site, please contact us. Here's the link to the Randsco Copyright Policy.
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 "noJS.html" is an HTML page to which visitors are directed, in the event visitors have javaScript turned off. (The link can go elsewhere, but this is the recommended method of "killing the link")
• The width of "PZ31cap" is the width of the full-sized image MINUS 10px and sets the width of the caption.
• 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. :)
Great work Dude. Just a suggestion ...
Call it EZPZ
EZPZ sounds fantastic, go on Scott and Yabs - make it EZPZ
You always get me pumped up about tweaking my blog when I visit your site. Good stuff for sure. I'm back from the whirl-wind ski trip in Austria. I'll drop you a line on a few problems areas I seems to be having on the blog (i.e., header photo not showing up when I use Firefox browser...)
All the best - Your work is valued very much. Thank you
Everyone should look at using this on their site.
I do have a question for you. Can this be done using two images?
Glad you like it and yes it can (use two images).
Just contact me and we'll get you fixed up.
I 'd like to use your code PZ3 in my 1.8 b2 but doesn't work.
The zoomed image covers the other images. I'm envisioning something like a disjointed rollover where the zoomed image and caption appear in fixed location.
THANKS!!! Great work!
Don't know exactly what your difficulty is, as this technique is b2evo-independent. (Hint - We're running b2 v1.8 and it works here).
I've sent you a private email. I'm sure we can sort it out.
Cheers,
-stk
The zoomed image overlies the thumb for a reason. Because a single image is used for BOTH, browsers freak when asked to display the image in two locations (you get a bad flicker).
Your solution would be to use two different images (one for zoom and one for thumb) and then you can do what you want.
That said, I have seen PZ deployed successfully inside of a table.
If you want to send a link to the page you're having a problem with, I could come around for a quick look.
Cheers,
-stk
table
tr
td some text td
td (PZ3 div block) td
td more text td
td more text td
tr
rinse and repeat many times
table
i dont use tables for my main site layout.. just for actual large amounts of data i need displayed in a table format. ive messed with displaying this data without using tables and i didnt get the results i wanted. any ideas/suggestions would be great.
thanks again
Need the page link & exact code. The problem may be unrelated to the XHTML code (like the doctype tossing IE into quirks mode, validation issues, etc.)
-stk
This is a great tool, but I too have an issue with it in tables in IE. Works great in FF.
Here is the link (only the 1st image is using PZ).
Would you be able to take a look at my code too? Where should I send it (or would "view source" be enough)?
Thank you!!!!
Anna
It was great working with you on resolving the issue. I was very impressed with the quick response time and a very reasonable price.
Thanks!
Anna
Thanks! I'm glad we were able to find a work-a-round.
I'll have to play with tables more, to see if the IE issue can be overcome.
If I find a solution, I'll let you know.
Cheers,
-stk
my site is www.themusicvideogod.com
Iran
Truly, I do not understand what you are suggesting.
If I right-click any zoomed Photo-Caption Zoom image in a IE6 browser, I have the following options:
- Save target as
- Save image as
- Email image
- print image
- set as background
- make a desktop item
- copy
Surely, one of these will achieve what you want?
Hope this helps.
-stk
Just a quick note to say congrats. It's a true thing of beauty and css simplicity in a sea of perpetual Internet junk and hacks! Bravo to you for the vision and determination to make it to work with a minimum of hacks and such. Wish I had a 'true need' to use it.
Highest Regards,
Dale
I'm not 100% certain what your 'original' layout looked like. However, if you want make a grouping of 2 rows, with three images on each row, I'd recommend making a containing DIV (fixed height/width) around all 6 of your images and then floating them all left (PZ3-l), inside the containing DIV. They'll fall into a 2-row, 3-col pattern, if the containing DIV is properly sized, assuming that each thumbnail is identical in size.
One could then position the containing DIV on the page, floating it left or right, or centering it with a "margin:##px auto;".
Note: It's possible to change the 'open-from' location for each image (currently from the upper-left for a left float, or upper-right for a right float) to something else. (Like this or these PZ2 examples - view the page source for the tricks
I've been wanting to do a slideshow for a whole bunch of small (100px by 100px) thumbs, where the thumb increases slightly in size, but also a full image pops up OFF the thumb, positioned either in a fixed viewing spot or an appropriate spot (independently chosen) on the page. (Just haven't had time.) It'd be kinda like this, but without the javascript "clickage". Still pure-css & fast.
Hope this helps.
Cheers,
-stk
I will digest all that tonight. The link to the construction is exactly what I want so i will view its source in depth. When you start a slideshow project please earmark my address for a beta tester. My PHP site has a thumbnail slideshow but its CSS and java mixed. Kinda fast. but kinda not. I would love to test for you.
Thanks
Jim ( TEXAS )
I tried days for days to fix the Z-Index bug in my code and could never do it. I'm just glad i found your code!
I just have one problem, when I scroll over the caption, it jumps to the right. This doesn't happen while scrolling over the image, or at all in Firefox.
Thanks so much for your code. Regards. :-)
*grin* Thanks for your comments. I tried to find (via your link) where you might be having the problem?
(I assumed it was in your own deployment of PZ3, but your link didn't really lead me to any PZ'd images.)
So ... some questions:
(1) Are you referring to this page on randsco.com? If so, which browser and version are you using?
(2) Your stopwatch page says that it's a simple "countdown" timer. If it's a "countdown" timer, shouldn't you be able to set the time and then count down to ZERO? (Seems to me it's more a count UP timer) :-p
Cheers,
-stk
Yep, when it loads up, click "count down", then you can enter the number you want it to start and count down from. Hope this helps
Regards.
I've replied in an off-line email, to your PZ issues.
I'm sure we can get is sorted.
If nothing else, PZ3 seems to be quite adaptable.
Cheers,
-stk
One issue that I'm experiencing is that in Firefox, I cannot get the RTL direction to work, only LTR. When I view your page that describes PZ3 in Firefox, the two images you have on the page both open LTR, not RTL. In IE6 the images display LTR and RTL respectively. And on my site the direction works fine in IE but not in FF. No matter what I've tried only LTR works. Not sure why.
IE is v. 6 and FF is v 1.07.
Thanks for saying!
I suggest that you upgrade your FireFox browser to the current version.
PZ3 was designed (and tested) for FFox v1.5 and up. I do not know the behavior for older versions, but I suspect since you're using v1.0.7, that is the issue.
You can get the current version (v2.0.0.1) HERE.
Can the the anchor point of the zoomed image be changed. Say lower left corner for a ltr or rtl direction and the image zoom up instead of down? I made a special class for p23-l and it floats left with direction rtl, worked easily. For 2 rows of thumbs, I want the top row to zoom up either ltr or rtl.
thanks
jim
You mean like this?
Yes.
-stk
I am trying to figure out thebest layout for Thumbs and at the same time have all thumbs, except the one being zoomed, still in sight and not covered up. This enables the viewer to not have to move the mouse in and out of the thumb area. Make sense, i hope.
Thanks
Tried an image size of 350 x 252 and set caption width to 340. It would not extend to the full 350. It does fine at 400 x 288. Is there a minimum width for the caption?
THANKS
jim
I forgot the image size has nothing to do with the zoom size. I tried a multiple of cap sizes from 300 to 400 and the cap box will not fill until 390px, does this sound correct.
Jim
I'd have to talk to you at length about sizes, in order to figure out exactly what you're having problems with.
The thumb size is user-set and determined by inline CSS. The ZOOM size is determined by the "native" size of the uploaded image. The caption size (width really) is specificed by inline CSS.
There are no inherant limits, either minimums or maximums for thumbs, zooms or captions.
Sadly, no more than a thought, atm. I'm lacking development funds to justify working on it and v.busy with other web-work.
I HAD hoped to post our Christmas photos, using it (but it's already mid-February).
DONE (8-Mar-2007)! - A first-pass photo-gallery, using PZ3, can be seen HERE Improvements coming -hopefully- soon!
After seeing your Photo Caption Zoom, I realized that is exactly what she needs. I've been trying to figure it out for days now and I still have no luck.
This page will show you what I am trying to do: http://www.daves-computer-service.com/myfotobella/t6/blank.html
I was thinking that the center would be 4 rows and 4 columns. Each pic would have a "BUY NOW" button beneath it.
Any help would be greatly appreciated. Thanks
Thanks for your interest in PZ3. Our copyright policy is free for personal use and donation for commercial projects.
If you still need help, use our contact form and I'll work with you to get things sorted.
Cheers,
-stk
But Bdr and noBdr doesn't work for me!
I tested my page with Firefox 2.0.0.2 and IE 6.
Can you make an example page for me, please?
I'd love to, but I can't. It doesn't work for me either.
The good news is that I've found out how to fix it (and will modify the code in a few days). The better news is that it uses LESS CODE!! If you can't wait for the fix, you can do it now.
In the CSS, look for:
.noBdr a img,.noBdr a:hover img { border:0; }
and change it to:
.noBdr,.noBdr a:hover { border:0; }
(Tested in 4 browsers - IE6, IE7, Opera & FireFox)
Thanks for letting me know about that, Scream!
-stk
PS - You're on about my first pass photo gallery? (I've still got some improving to do on it. I think it works better with images done horizontally, rather than vertically and I want to include some stylized captions). Heck, now that IE7 is out, maybe I'll even toy with some transparent PNGs!
But it seems as if the same problem exists with noCap...
greetings
Scream
The Cap|noCap option works FINE for regular PZ3 images (I just tested it). However, in the 'First-Pass' version of PZ3 Photo Gallery, I've not yet coded in ANY caption capabilities.
That's why I, in the comment above I said:
I had occasion to show an image with a thumbnail smaller than 100px in width (27px wide x 23px high) and zoom it to its full size of 112w x 94h. It works fine in Firefox, but, if I include a caption, IE 7 has problems.
When in thumbnail mode, IE 7 shows an image that has the width that I specify (I've tried 27 and 50), but the height is about 100px. When I hover, it behaves properly and zooms to show the correctly sized image with the caption. If I remove the caption, IE 7 works fine--I can specify the smaller size thumbnail and it works.
The closer I get to a width of 100, the less noticeable the problem. I put three PZ3 divs in a row--one with a 27w x 23h thumbnail and a caption, one with a 100w x 84h thumbnail and a caption, and one at 100w x 84h without a caption. The first two show correct widths, but the height (measured from screen captures) on both is about 100px. The third one shows the width of 100 with the correct height of 84.
Unfortunately, I don't have access to an earlier IE anymore; so I can't comment about those. Firefox (I'm running 2.0.0.3) has no problems that I can tell.
Any idea of what I could change in the caption style for this to work correctly?
Thanks!
I don't see it. I created a temporary test post.
I ran a range of right|left stacked PZ images, varying the thumb size and letting each zoom to 112px square (photo enlarged from 80px, so it looks a tad pixelated).
No issues in IE7 (though I did notice -FOR THE FIRST TIME-) that left-floated PZ images in IE7 introduce a horizontal scrollbar, upon hover. The greater the disparity between thumb size and full image, the greater the "scroll". (Cosmetic, but still annoying).
Anyway ... I don't see the problem. Maybe you can point me to a page where you DO see it? (Might be a conflict with other CSS? Just a guess.)
Cheers,
-stk
EDIT: It turns out that it was a doctype problem. Al was authoring the pages using a doctype that forced "quirks-mode". Once I pointed this out, he changed his doctype to trigger "standards-mode" and all was fine. Read why quirks-mode is bad.
We are a non-profit university organisation, located at Lisbon, IST (