Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

random top 40

Photo-Caption Zoom v3

Photo-Caption Zoom v3

April 10th, 2006  · stk

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.

Latest Version: v080630 Changes: 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 - 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 ¥åßßå!

Feature List
(Items in RED are enhancements over PZ2)

•  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%
•  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 ...


§ Problems with Opera v9.02?

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

 

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

(Permalink)
Views: 205379 views
158 Comments · GuestBook
default pin-it button
Updated: 6-Sep-2011
Web View Count: 205379 viewsLast Web Update: 6-Sep-2011

Your Two Sense:

XHTML tags allowed. URLs & such will be converted to links.


Subscribe to Comments

Auto convert line breaks to <br />

1.flag DontheCat Comment
04/14/06
Ah,

Great work Dude. Just a suggestion ...

Call it EZPZ
2.flag Gary Comment
04/15/06
Mint !

EZPZ sounds fantastic, go on Scott and Yabs - make it EZPZ
3.flag Sieg Comment
04/16/06
Hey Scott!!

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...)
4.flag Sieg Comment
04/16/06
I'll wait for the step-by-step for dummies to show up, on your blog. 'Cuz it's Easter and I shouldn't get so mad.
5.flag Luke Comment
05/05/06
You are the Daddy! One of the 2 Great Daddys of the net - You N Stu.

All the best - Your work is valued very much. Thank you
6.flag Victor Comment
07/06/06
I have copied your code to try this photo zoom solution and I like it. Kudos to you and your friends, this thing is great!

Everyone should look at using this on their site.

I do have a question for you. Can this be done using two images?
7.flag stk Comment
07/06/06
Victor,

Glad you like it and yes it can (use two images).

Just contact me and we'll get you fixed up.
8.flag Yos Comment
07/31/06
Very nice!!!

I 'd like to use your code PZ3 in my 1.8 b2 but doesn't work.
9.flag Chris Comment
07/31/06
I am totally digging this! I got it to work with multiple images. Can you tell me what part of the CSS I need to change to specify where the enlarged image appears?

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!
10.flag stk Comment
08/04/06
Yos,

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
11.flag stk Comment
08/04/06
Chris,

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.

12.flag Kevin Comment
08/09/06
im having a slight issue (IE only of course) with pz3. im using it in a table and when i hover over the thumbnail in firefox/opera it zooms in and has no effect on the layout. unfortunately when i try in IE it pushes the 3 TD blocks next to the images as far right as to not be behind the zoomed image. anyone have an idea how to fix this?
13.flag stk Comment
08/09/06
I don't recommend using tables for layout. They were designed for displaying tabular data and are inefficient and (as you notice) unpredictable, for controlling page layout.

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
14.flag Kevin Comment
08/10/06
scott - thanks for the reply. i dont have it in front of me but its a very simple table

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

15.flag stk Comment
08/10/06
Kevin,

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
16.flag Anna Comment
08/18/06
Hi Scott,
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
17.flag Anna Comment
08/24/06
Hi Scott,
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
18.flag stk Comment
08/24/06
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
19.flag getjins Comment
10/16/06
cool work
20.flag josh Comment
12/07/06
hey can anyone help me. i need help making a code so that when ever anyone clicks on a video link it says how many times the links been clicked like how it shows how many views they have on www.musicjesus.com
my site is www.themusicvideogod.com
21.flag zhaiduo Comment
12/08/06
really cool!!
22.flag Iran Comment
12/10/06
It is really nice. But it would even better if there was a "save as" link inside it, just like the IE7 does.

Iran
23.flag stk Comment
12/10/06
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
24.flag Dale Comment
12/15/06
Wow. Impressive, fabulous and just plain outstanding work with your PZ3 image zoom CSS!

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
25.flag Sajid Iqbal Comment
01/04/07
Very nice dude...this is really helpful for newbies to learn CSS in depth.
26.flag Jim Comment
01/06/07
I have read all install instructions and I guess I am just not there yet! I have 6 thumbs on my homepage, 2 rows, 3 each. No tables! I copied the image code to each thumb. Now there are 3 rows, 2 images each, 1 image is left and 1 right, but no middle, WHAT HAPPENED???
27.flag Jim Comment
01/06/07
Forgot this! i realize the left and right is due to the style class. I put 3 PZ3-l and 3 PZ3-r. I know that is why i got what I did. My question should have been. What needs to be corrected to have my original layout. THANKS
28.flag stk Comment
01/06/07
Jim,

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
29.flag Jim Comment
01/06/07
Thanks Scott

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 )
30.flag Jim Comment
01/06/07
Just checked out the last link to the slideshow. For sure I could lend some Photography insight for viewer enhancement. If you would like to do this my email is 3jbert@tx.rr.com.
31.flag Online Stopwatch Comment
01/11/07
Wow, your code is truly amazing! Thanks for releasing this for everyone to use.

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. :-)
32.flag stk Comment
01/11/07
Dear Online Stopwatch,

*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
33.flag Online Stopwatch Comment
01/11/07
Thanks for your fast reply! The code will be used in another project (full credits to you of course). I think i'm trying to use your code for somthing it isnt intented :-( A sort of popup card with the details on the right of the photo. I've gone stright into trying to hack the css, instead of chaning varibles in the html. (woops). The problem of the images moving location seems to fix once you click on a link. then they are rock solid. (p.s I've been reading your blog! lol, i dont think i've ever known so much about a house in canada. haha :) )
34.flag Online Stopwatch Comment
01/11/07
Sorry, and to answer your other question...

(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



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.
35.flag stk Comment
01/11/07
LOL. Again, I've missed the obvious (@ count down timer).

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
36.flag Claude Comment
01/14/07
Great code and relatively simple, after you did all of the work.

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.
37.flag stk Comment
01/14/07
Claude,

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.
38.flag Claude Comment
01/14/07
Thank you, Scott. Upgrading did the trick. That was much less painless than banging my head on the desk. Again, thanks.
39.flag Jim Comment
01/16/07
Scott,

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
40.flag stk Comment
01/16/07
Jim,

You mean like this?

Yes. :D

-stk
41.flag Jim Comment
01/16/07
Exactly Scott,

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
42.flag Jim Comment
01/16/07
Scott,

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
43.flag Jim Comment
01/16/07
Scott,

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
44.flag stk Comment
01/16/07
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.
45.flag Scream Comment
02/12/07
What's the current status of your slideshow project?
46.flag stk Comment
02/12/07
Scream,

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!
47.flag Dave Comment
02/16/07
Where do I start? Let's see, how about, " I am not a website designer". But, I am trying to help a friend design a photography webiste so she can display (sell) her photographs. At 60 years of age my mind doesn't grasp things like younger folks. I know some HTML but with CSS, I am totally lost.

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
48.flag stk Comment
02/17/07
Dave,

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
49.flag Scream Comment
03/15/07
Great new Version!!
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?
50.flag stk Comment
03/15/07
Scream,

I'd love to, but I can't. It doesn't work for me either. :( It's not a feature I use often, apparently.

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!
51.flag Scream Comment
03/15/07
Thx for your fast answer :-)

But it seems as if the same problem exists with noCap...

greetings
Scream
52.flag stk Comment
03/15/07
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'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.

53.flag Al Comment
04/12/07
PZ3 is very cool; I really like it. I have noticed an anomaly, though, that I am confused about.

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!

54.flag stk Comment
04/12/07
Al,

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.
55.flag Joćo Silva Comment
04/13/07
I just love your PZ3.

We are a non-profit university organisation, located at Lisbon, IST ( Our website ).

We are promoting the 7th JEEC (week of electro-technical and computer engineers). PZ3 allowed me a way to put a large image on the website without compromising its structure. Here are the results: http://mega.ist.utl.pt/~neecist/jeec/palestras/

Thanks,
João Silva
56.flag kenny Comment
04/16/07
hey - great code, thanks for sharing it. i've gotten it to successfully render in FF, but IE 7 only shows 1/2 of my first image and none of the subsequent images. they're aligned vertically along the left side of the screen, w/ text along the right. any clue? any help is much appreciated.
57.flag stk Comment
04/17/07
Kenny,

You're problem is with the non-PZ3 CSS that surround your image DIV.

I've emailed you a solution that will fix your problem.
58.flag Kenny Comment
04/19/07
thanks, i'll try it out!

i appreciate your help. i was also curious about the possibility of making the image pop out and hover when rolling over text as opposed to hovering over an image?
59.flag stk Comment
04/19/07
Kenny,

You may be interested in having a look at this page.

It's a proof-of-concept page using an IMAGE, rather than text, but I believe that the answer would be "yes", PZ3 could be modified to reveal an image and caption, for a text link. (Operative word being "modified", as it doesn't provide that capability, out of the box).

If this is something you want/need within a limited time-frame, let me know (we can work out a reasonable price for the modification) ... or you can wait till/if I get a round "tuit".

Cheers,
-stk

EDIT (2007-Dec) - I've created such an animal, but no from existing Photo-caption Zoom code (which expects the starting point to be an image, not text ... go figure)!

I've dubbed the CSS technique "pop-Info". See it here - Rockin' da Sidebah
60.flag Dav4is Comment
04/21/07
Is it only me or is the right-aligned image not working properly (on this page!) with Mozilla 1.7, Netscape 7.1 and 8.1?

The image zooms, but to the right, disappearing some of it off the edge of the window.

-R.
61.flag stk Comment
04/21/07
R,

PZ3 works in Netscape 8.1 (7.1?) w/'IE' rendering. It fails, as you describe, using 'FireFox' rendering. (Toggle in the lower-left corner) Note: Don't change engines on the page. You must change engines on another page and then go to the page you want to "Display like IE".

FYI: Mozilla 1.7 - support for the Mozilla 1.x is ending & they recommend switching to FireFox.

I looked at w3school's browser stats. The 'Mozilla Suite' is only 1.3% for March.

Hmmm. Listing Netscape as the Mozilla Suite might explain it's FFx rendering problem (Moz 1.7 engine)?

On a positive note: roughly 94% of w3schools visitors use browsers that correctly render PZ3! (94% is darn good)! :D

Regarding Mozilla/Netscape: Traffic from Mozilla (already small) will fade; future versions of Netscape may be recoded to utilize "FireFox", rather than Moz v1.7, if so, it'll render PZ3 better.

Cheers,
-stk

P.S. I'll update the post to reflect your discovery. Thanks for writing and helping to solve the Netscape FireFox rendering issue!
62.flag Rod Dav4is Comment
04/21/07
Hi,

Thanks for the come-back, and sorry to have misled you: yes, I meant Moz Suite 1.7.13. My bad! It all worked out for the best, though...

What I am up to is trying a few PZ tweaks: (I can never leave well enough alone)

  (1) Add a header with an always visible figure number which can be keyed to the text.
  (2) Have a disabled PZ figure with the thumbnail at 100% size -- i.e. with no zoom.

This page will show where I'm at: Your pictures are there (temporarily) for reference. The problems I'm having:

  (1) Adding the header causes the bottom of the thumbnail img to be trimmed. I have not been able to overcome this by various fiddlings.
  (2) The zero zoom figure (figure 3) has no link, but I can't make it present that way.

I think that both these effects would be useful (optional) additions to PZ (EZPZ?), but otherwise, I would appreciate any pointers you could toss my way.

-R.
63.flag stk Comment
04/23/07
Rod,

I only had a quick look ...

1) Instead of headers, I might be tempted, instead, to have default (styled) thumbnail images that were (a) either the thumb you want to show + "Figure #" on top or (b) were just images and all they said was "Figure #" ... then show the full image + caption (no figure #) on hover.

2) For the thumb with header and caption ... I'd be tempted to ditch PZ3 and just have a wrapper DIV with two <span>s and an <img> tag (no need for all the zoom CSS if you don't need use it).

Keep working. We have a hockey game to watch (Canucks and Stars) and if I get time tomorrow, I might have a quick play. No promises.

Cheers,
-stk

EDIT: Check this out ;)
64.flag Steve Comment
06/05/07
This is fine code I've stumbled upon and it will save me masses of work - thank you so much.
65.flag stk Comment
06/05/07
Steve, thanks for saying. It's always nice to hear that the code is appreciated.

(I removed your "Work In Progress" URL link, just to save folks from heading down a broken link. I hear you, though!)

Cheers,
-stk
66.flag Mike Comment
06/06/07
Hi there,

Is there a way to setup PZ3 in a way that displays the thumbnail from a static image that when hovered over, zooms out to the desired image?

I'm sure there is, but I'm missing how to get there.

Thanks in advance!

Mike
67.flag Mike Comment
06/06/07
Hey Scott,

Did you ever get a resolution to comment #14 (08/2006)? I am experiencing the same problem in my testing.

Thanks again,

Mike
68.flag stk Comment
06/06/07
Mike,

Not sure what you're on about in your first comment.

(a) Zoomed image OFF of the thumb?

(b) Zoomed image DIFFERENT than the thumb?

Both are achievable (email me and I can help you out).

Regarding tables ... no, I've not found the root cause (nor tested in IE7). I do know it's problematic and any solution I've seen (or deployed) has been kludgy.

1) Don't use tables for layout.

2) Using PZ3 inside of tabular data is problematic. (Have come up with work-a-rounds, but they're not 100% satisfactory for me - Mr. Perfectionist).
69.flag FYI Comment
06/09/07
It's working fine in Safari 1.3.2 (highest version for Panther users)
70.flag stk Comment
06/09/07
Thanks for the FYI, nice to know. ( Usually, all I get are "problems" :p )
71.flag Tosh Comment
06/14/07
Awesome code, really cool stuff. Keep up the great work!

I tried to add this to our autos for sale section of our website. And of course it works perfectly in FF but IE7 is breaks (surprise, surprise).

https://www.ucreditu.com/loans/autoline-m2m-TEST.html

That's the page. view it in IE7. It just displays the larger photo by default ...... what am I doing wrong?
72.flag stk Comment
06/14/07
Tosh,

Don't use tables for layout. Find out why.

(One result is that tables prevents some CSS directives from working properly). Not such an issue with a more modern browser, like FireFox, but a deal-killer for IE, I'm afraid, with all it's legacy support.

The good news is that your fix is simple. Pull the code out of the table (for just the car listing area) and it should work fine!

Cheers,
-stk
73.flag Tosh Comment
06/18/07
I got it to work! And it looks much cleaner than before. Thanks for the advice!

Here is what it looks like. Mouse over the car images :)

https://www.ucreditu.com/loans/autoline-m2m.html
74.flag Adrian Comment
06/29/07
PZ3 is excellent and just what I needed for an update of something for work (If I get it right I'll discuss a fee?!). I have found that a caption longer than 3 lines appears with the caption, at least in part. Is this due to the css or do you suspect my surrounding css may be making a problem?
75.flag stk Comment
06/29/07
Adrian,

Thanks for the kind words.

I don't understand your "caption longer than 3 lines" problem. FWIW I often use captions that contain many (more than 6) lines, without issue.

Maybe you can link the specific page you're experiencing the difficulty?

Cheers,
-stk
76.flag Clint Comment
09/08/07
Just wanted to thank you for your hard work on PZ3. It works fantastic.

I do, however, have a question. Is there any way to make the image "pop-up" from the bottom of the thumb? As it works now, the top of the large image is on line with the top of the thumb. i would like it to be flush with the bottom where the pop-up goes up when shown and not down.
I hope this makes sense.

I ask this because when images are near the bottom of the page, they increase the size of the page and the visitor has to scroll down more to view the entire image.

Thanks so much,

Clint
77.flag stk Comment
09/08/07
Clint,

What you're asking for is entirely possible. The only difficulty is that we're on holiday, at the moment.

The key will be to change the margins for the zoomed image (which will have to be a picture-specific thing, unless they're all sized identically).

Give me a shout in a week, if you haven't got it sorted, and I'll give you a hand.

EDITED (added text below)

The solution we employ on RANDSCO is to use a bottom page margin (or is it padding?) to all of our pages. This leaves space at the bottom of the page for an image to zoom into, should such a situation arise.

Of course, it is entirely possible to have the image expand from the lower left or lower right corner, but there are a couple of problems with this:

1) To expand from the bottom requires an image-specific margin CSS.

2) If some images expand from the upper left, some from the upper right and some from the bottom, visitors might find the behavior "unpredictable" ... (which is one of the reasons why I generally just expand all ours from the top of the image).

I hope this helps and thanks for your kind comments about Photo-caption zoom.

Cheers,
-stk
78.flag Clint Comment
09/08/07
thanks very much!

Clint
79.flag myles Comment
09/28/07
This is a great script thank you guys.

I've come across another IE7 only bug whilst testing this out for a non-profit charity website:

http://debastion.com/myles/webdesign/bpg/calendar.php

At the above off-site testing link, the script functions perfectly for all browsers (even IE6 for me) except for IE7 where it pushes the layout length-ways. Any ideas why?
I didn't code the site so have limited ability to make extreme modifications but any help is appreciated.

Thank you.
80.flag stk Comment
09/29/07
Myles,

Glad you like PZ3!

Luckily, the problem you're having is a deployment issue and not a PZ3 issue. (Good news! There's a fix). smilie

The site has two problems:

1) It fails validation with 44 errors.

2) It uses tables for layout.

Fix both and the IE7 issue you've noted, will go away. (#2 is likely the root cause. While it's recommended one author error-free pages and not using tables for layout, you CAN - if you're short on time - just pull the PZ3 stuff out of tables and it will likely cure your observed problem).

More about why tables shouldn't be used for layout. (Bottom line: PZ3 uses the CSS "width" directive, which is not interpreted correctly inside of table-cells).

81.flag myles Comment
09/29/07
Hi stk,

Thanks for the great support.
I did suspect that the table layout nature of the site (grrr @ the developer responsible!) would cause problems.

For this reason, I already moved the PZ3 code into it's own div out of a table, and for this reason it works perfectly in Firefox, Safari and IE6 but why not IE7?

It seems that IE7 thinks that it's contained in a table but it is not.

Anyway, I know I can't really polish a turd so may have to live with the tables and move on!

This is a great piece of code though, very clever and good implementation.

Thanks again.
82.flag stk Comment
09/29/07

I already moved the PZ3 code into it's own div out of a table

Are you talking about the calendar.php page, or another page? If you're on about the calendar.php page, the PZ3 code appears to be buried inside at least two tables, maybe three. (The PZ3 XHTML must be completely outside of every table on the page, for the CSS to be properly interpreted). ;)

FWIW, the PZ3 code appears in my browser (incorrectly) as an H4 element, because the heading tag isn't closed properly. Immediately before the PZ3 DIV is:

<h4>A Schedule of our upcoming events.<h4>



There's lots not to love on that calendar.php page. It really needs to have those 44 validation errors fixed and layout properly DIV'd! :p

If you've got another page with that behavior (IE7 problem and PZ3 is outside of tables), post the link and I'll come round and have a look.

Cheers,
-stk
83.flag Acidic68 Comment
10/05/07
Hi there! Thanks for sharing with us!

I'd like to ask whether you ever managed to solve Kevin's problem (#12) with IE6 and tables.

Your solution appears to be a perfect one for data tables in which there is an image in one cell (eg. product listings, where one would want to zoom the product image on hover). However there is a problem with IE6, as Kevin described.

I do not have any URL to point you to, all I did was create a simple page with a one-cell-table in it and tested your code (doctype XHTML 1.0 Strict and valid code).

Since you've advised people not to use tables for layout (and I don't), does it also mean that your solution doesn't work in IE6 in any tables?
84.flag stk Comment
10/05/07
Acidic68,

Unfortunately, no. CSS directives are erratically supported inside of table cells.

You're correct. Tabular data inside a table might often include a photo and it's too bad that PZ3 doesn't work as expected.

(I believe it's the poor support for the "width" directive, upon which, PZ3 relies heavily).

For one client, I 'welded' on a set of DIVs onto one end of a product specification table. It appeared to be a pixel-perfect solution and they were happy (but it "broke" if visitors changed the text size).

The only solution I know, at the moment, is to create a DIV construct to LOOK LIKE a table. (Which isn't ideal).

Because more people are incorrectly using tables for layout, than requesting PZ3 to work inside semantically correct tables ... I've not spent much time looking for a solution.

Sorry. I wish I had better news.

-stk
85.flag myles Comment
10/05/07
You should put a FAQ or note in the installation instructions that using this script within tables is unsupported as it is not semnatic or standards compliant.

:)
86.flag stk Comment
10/05/07
Myles,

Good idea. Done. smilie

(last bullet under "Usage & Considerations)

-stk
87.flag Acidic68 Comment
10/07/07
Sad to hear that I won't be able to use it in my project :(. Do you, or anybody else here, know of any solution for my case (zooming thumbnail images in a data table)? It wouldn't have to be pure CSS, can easily include Javascript.
88.flag Istvan Comment
10/28/07
Almost there...
Do you have any idea what could be causing the caption to display in thumb view?
When hove it is OK, but in thumb view the caption is there in an ugly big span - inheriting my page's CSS.
(It's on a WordPress blog)
89.flag stk Comment
10/28/07
Istvan - Maybe, if you could link a page that shows the problem. ;)
90.flag Istvan Comment
10/29/07
Thanks for your reply.
Take a look at this test-install.
But I've got the same result on a local installation on my machine and on another blog on a different server.

I copied the code several times, just to make sure I didn't miss anything. Checked in FF 1.5, IE6 and Opera - the last being the worse.
91.flag stk Comment
10/29/07
Istvan - I had a quick look at your page. It's not conflicting CSS (which was my original thought). Instead, the problem appears to be the XHTML in the post. You have:


<div class="PZ3zoom PZ3-r Bdr noCap Lnk" style="width:145px; height=100">


It's the "height=100" that is giving you the problem. In XHTML, the units need to be specified and the equals is replaced with a colon. Change it to "height:100px;" and your problem will be solved.

Cheers,
-stk
92.flag Istvan Comment
10/29/07
Thank you very much Scott!

It seems this fixed it. However, your remark made me aware that sometimes there might be some conflicting CSS in the themes, which might explain why the behaviour is not always the same in different WP themes.

Thanks again! Great script and excellent support.
93.flag Ray Comment
11/13/07
Hi - I get the feeling this morning that we are nearly neighbours! Yellow Point? Not that far from Lantzville.....

Never noticed that when I came across PZ3 while working to update my website - converting ancient code into valid XHTML and CSS - PZ3 a great help but for some frustrations trying to make it do exactly what I want in Firefox and (UGH!) Opera - it's working just fine in IE. Oh well, it's close...

... ray
94.flag stk Comment
11/13/07
We are nearly neighbors!

If you need help with PZ3, just give a holler, as it works fine in FireFox & Opera.

Cheers.
95.flag Ray Comment
11/19/07
Thanks, Scott, for your help.

(After some off-list emails, Scott picked out programming errors that were causing a glitch positioning my thumbnails.)

PZ3 is working beautifully on my site!

There is one other little glitch that may or may not be related to PZ3; we'll work on that one.

But PZ3 is the best thing that's happened for me in ages!

Looking next at the photo gallery - it has real possibilities!
96.flag Ray Comment
11/27/07
Scott, I've mostly finished Phase 1 of my rebuild and added a back-link on the index page. PZ3 has been a great addition! Next will be to do something with the photo galleries.
The glitch remaining is that issue with the first letter pseusoclass. It works just fine in IE and Opera but if PZ3 is used anywhere on the page, it doubles up that first letter in FireFox. Frustrating but I'll just leave it until I can find an answer....
Those chickens keeping warm tonight?
97.flag stk Comment
11/27/07
LOL ... I just fed them, so they're all tucked away in their cage, under the 100-watt bulb. Mind you ... they ARE in the garage. ;)

If you can't get your :first-letter sorted, let me know (not a selector I've played with)
98.flag Trevor Comment
11/30/07
Hi Scott,
Thanks for the previous help in getting the code working on my little site. I uploaded to a new host, and am running into problems getting some of the formatting to work after running this script. Take a look at http://www.academystitches.com and then at www.academystitches.com/about.html. For some reason, after utilizing the script I am running into problems getting the "footer" styling to work. Any ideas? Thanks
99.flag Trevor Comment
11/30/07
also having issues turnig off captions. when i put "noCap" in the class tag, it does not turn off the caption.
100.flag stk Comment
11/30/07
Trevor - "noCap" ... I just caught an omission in the CSS yesterday (by coincidence). It's been updated on the website, but you'll need to add the red bit to your CSS:

.noCap a:hover .PZ3cap,
.noCap a:hover .PZ31cap
{ border:none; }

About your footer. I see 50 validation errors on the page [most seem to be that the <br> tags are not closed properly - i.e. <br />], but I see one for a DIV which isn't open. This tells me that there's a DIV you think is open (or closed) and isn't.

That's probably your problem.
101.flag Trevor Comment
12/03/07
Thanks for the reply. I borrowed this template from another site and had not validated it yet at this point. I will go through it and see if the issues can be corrected. Thanks again for the help.

Once I finish up this site, I plan on making another donation to you and a great link back - you have been more than helpful and deserve it.
102.flag OIEAdmin Comment
02/21/08
I have adapted your code in a non-profit website. It's been working well, Good JOB!
103.flag stk Comment
02/22/08
OIEAdmin - Glad to hear it's working well for you. What is "OIE"? Do you have a link to the page(s) it's deployed? Did you include a link-back? 0:-)
104.flag Spider Comment
03/07/08
Have problem in ie6 the div is distroyed.
105.flag stk Comment
03/08/08
Must be at your end (?) b/c everything here, in IE6, looks OKAY.

Are you trying to say that YOU are having a problem with deployment in IE6? (or this SITE is having a problem?)

English, eh? :p
106.flag Oksana Comment
03/24/08
Hi! :) I wanted to use this tool (which, by the way, is incredible) in my Blogger blog. How would I go about making the images in my posts pop up like that? Where would I put the first bit of code?

Thanks for your help!
107.flag Dan Porter Comment
05/04/08
Nice way to save page space!

Is it possible to show the image more slowly, like with this tool?
108.flag stk Comment
05/04/08
Dan - On the negative side, Photo-caption zoom can't show the image more slowly.

On the positive side, Photo-caption Zoom works identically, whether javascript is on (or off), it uses only one image file and is free for personal use!! :D
109.flag moshu Comment
05/15/08
This works great in WP blogs, too... until you want to syndicate your content. In Google Feedreader, for example, it will show the full size image overlapped on the text/content.

I will also ask WP guys about having the thumb in the feeds but I thought I's ask here as well.
110.flag stk Comment
05/15/08
Moshu - On the positive side, PZ3 works on any blog - nay ... on any webpage! ;)

On the negative side, XML is not HTML and although XML can be styled with CSS or XSL, most major browsers *cough IE* and *cough FF*, override such styling, with their own version of "friendly feed styling".

OTOH, why use feeds to display the entire content of your post? Most CMS (including WP) allow you to modify the feeds, so that you might present only a teaser of content (and not show images).

This is what we do for randsco, via the feedburner service (i.e., "Here's an abstract of the post, but you need to go to the website to see the material as it's intended to be seen, via a web browser").

XML isn't HTML (or XHMTL) and an RSS, Atom or RDF feed is (apparently) a special breed of XML (according to Mozilla and Microsoft) ... one you're not fully capable of dealing with yourself, so thankfully ... they've intervened on your behalf. </sarcasm> :|
111.flag Jim Comment
06/08/08
I want to put multiple PZ3 zoom boxes on the right. Vertical, maybe 2 or 3.
112.flag stk Comment
06/09/08
Jim - No problem.

Just enclose 3 (or more) left (or right) floated PZ3 images in a DIV that has a width constrained to be "slightly larger than" the width of your thumbs + (any applied margining, padding, or borders).

( i.e., <div class="container"> [PZ3-L image1] [PZ3-L image2] [PZ3-L image3] </div> )

This post shows an example.
113.flag Jonathan Comment
06/12/08
Hi Scott,
First of all, this is one great piece of coding. I hope you are suitably proud of what you have created. I will certainly give a link-back to you.

I am using the new PZ31 version and I noticed that noCap was not working. I fixed the css by adding
.noCap a:hover .PZ31cap { display:none; }
and was surprised that no one had mentioned this before. Then I read comment #100 on this page and it seems that it had been reported. Maybe you forgot to update the web page with the source? or have I taken the source from the wrong page?

Hope this helps,
Jonathan
114.flag Bug Comment
06/18/08
1) open http://randsco.com/_miscPgs/cssZoomPZ3.html
2) mouse over #2 image
3) scroll down using mouse wheel
4) the bug
115.flag stk Comment
06/18/08
Jonathan - Hmmm. You're right. I swear, it WAS fixed. :oops: I bet I overwrote the page with an older, local copy. :(

Bug-boy - LOL ... yes ... there appears to be a cascade conflict on the page. Not a "bug" per se, but undesireable, non-the-less.

I'll have a play and sort both of these issues, when I return to Canada.

Thanks for your help. ;)

EDIT - both have been fixed.
116.flag Basil Comment
07/06/08
Hi Scott,

Great job with EZPZ... really useful stuff...

Is there a way to delay the zooming (so that only if it is above that for more than so many seconds it will zoom)? ... or only after a click?

I wouldn't mind using JavaScript if I had to, but would prefer a CSS-based solution to it.

I just need to know if there is a way, I would go about trying to implement it.

Thanks,
Basil
117.flag stk Comment
07/07/08
Basil - Good thing you won't mind using JavaScript then, as CSS is about styling and JavaScript is about behavior. (i.e., a click or delay is a behavioral change). ;)
118.flag Basil Comment
07/07/08
Ok, so that rules out any CSS only solutions...

BTW, The reason why i was doing this is because visitors to my site commented that the auto zooming images are a bit disorienting, and are irritating when they happen due to an accidental mouse over.

So is there some css trick/advice that answers this problem? I dont mind even if it is very different from EZPZ, as long as it can zoom in and show my images without my visitors disliking it.

I do not know much of either javascript or CSS, and am a Java developer. But i will try my hand at it and let you know of what happens...
119.flag stk Comment
07/07/08
Basil - LOL @ "disorienting" :p

While I might agree that the first time a visitor "zooms" an image, it might come as a bit of a surprise, the zooming is easily figured out, controlled and behaves consistently. (i.e., no-one has complained on our blog that it's "disorienting" ... maybe it has to do with your deployment?)

PZ3 is really meant for showing a few images, inline with a body of text. We zoom from 200px to about 500px, most of the time. (If you zoom from very tiny thumbnails to very large images, the effect may well be 'too dramatic' a size change?)

Personally, I don't like having to click every image to see a larger version, on the same page, but if you're into that ... then you may like Lightbox 2, as it's a classy JavaScript tool that you may like better.

Hope this helps.
120.flag Arnold Comment
07/27/08
Would it be possible to position images in the middle of the page (horizontally and vertically)? I want to show some large images and users with smaller screens have to scroll to see full image.
121.flag stk Comment
07/31/08
Arnold - I don't recommend showing images that are wider than 800px for two reasons:

1) 800px is about as small a screen as most designers target.

2) 800px images make large file sizes and a web author should always keep the over-all page size in mind when authoring web pages.

Having said this, there are CSS techniques that provide centering tools:

text-align:center;
margin:0 auto;
position:absolute; left:50%;

are 3 that come to mind.

The PZ3 Photo Gallery uses the last one. :D


122.flag =8)-DX Comment
10/01/08
Hello there,
just wanted to say your code is cool well written, elegant clean etc BUT! the biggest problem to my mind is that you'r resizing a large image directly. That's bad practice. For instance any e-shop site will have lists where you have say 50 products with images on-page. And your method ends up directly downloading all 50 full-resolution images (for some people that's could be a 1 min download). Generating small thumbnail images has a REASON, see... Recently I entered a site just like that.. well I only browsed about 2 product pages because of the MB images linked there.. I didn't however mind the large, quality images on the product details pages (big image - lots of detail)

Anyhow I just think that you should mention small, jpg thumbnails as the best-practice way to go (for e-shops, not galleries, EZPZ would be good for those), even though they can be a pain, with the added programming/ image-converting envolved.
123.flag stk Comment
10/01/08
DX - You raise a good point, but it's a deployment problem, not a Photo-zoom technique problem. Photo-caption Zoom offers many benefits and some are because it does resize the image directly (e.g., one image file instead of two, no pop-up windows, keeps visitor on the same page as the relevant text article, enhances readability, etc.)

At the end of the day, Photo-caption Zoom is only a CSS tool, but like all tools, it must be wielded carefully. It doesn't take 50 full-resolution images to generate a page that creates a horridly long load time. Just a few 4 MB raw JPGs, uploaded directly from a digital camera, can make a page that no-one on dial-up would ever wait to fully load.

I've tried to address this with a tutorial about preparing images for the web, which covers digital images in general, but not Photo-caption Zoom specifically. I've seen many abuses of photo data on various websites, most of which don't even use Photo-caption Zoom.

I think you're right: I should add a warning about deploying too many Photo-caption Zoom images on one page, about the benefits of optimizing web images and keeping the visitor experience (load times) in mind.

However, the fault lies with the person using these tools, not the tools themselves.

Thanks for your comment. :D

124.flag Rajat Sarkar Comment
10/08/08
Nice work and its a place to visit again & again.
125.flag stk Comment
10/09/08
Rajat Sarkar - Thanks. Glad you like the Photo-caption zoom technique and the site.
126.flag Robert Comment
10/26/08
I keep coming back here, because I've learned alot from your excellent efforts. Currently, I'm using my education to do a variation on your method. Essentially, displaying two divs, one for text, one graphic, on hover.
In a reversal of most complaints, it works as expected in IE5, however, a quirk occurs in Firefox and Chrome where, upon refreshing the page a couple of times, one of the hidden text DIVs shows up in the menu portion; as if the DIV has been completely ignored.
http://www.media-911.com/arcostream/index09.html.
I've tried everything, even setting a style of z-index:-1 inside of the text's DIV; no go.
Any Ideas?
127.flag Derek Peters Comment
10/29/08
Does anyone know where I can find some code for the following.

I want a bank of pictures on the right side and a "monitor" on the left, where if i scroll over any picture in the bank ... it'll show up in the monitor?

ie. www.lisepredko.com
128.flag JIM Comment
10/29/08
Derek,

I came across a neat kinda slideshow at projectseven.com. It is not as fast a Photo-zoom but still acceptable. Many options on the fly.


jim ( 3jbert@tx.rr.com )
129.flag stk Comment
10/29/08
Derek - You should be able to adapt either this CSS show or this CSS demo. I'm not sure what your budget/time-frame is like, but I could build it for you, if you want. Just let me know.

PS - The link you meant was: www.lisApredko.com ;)

PPS - Ewe ... Lisa's site uses frames (boo hiss), tables for layout (boo hiss), has a whackload of HTML errors (boo hiss) and relies on javascript for the slide show (boo hiss). :p
130.flag Derek Peters Comment
10/29/08
Thanks for your help I will look into your suggestions.

Much appreciated.

I am in a basic web class and for our final we will be creating a website.

So i want it to be good enough for my photography.

thanks again.
131.flag JIM Comment
10/29/08
Derek,

Wanted to send you one other program. It is exactly what you are looking for with one exception. It is a click instead of hover, but that is not too bad. Do a google on Simple Viewer


JIM
132.flag The Crazy Mick Comment
02/17/09
This is what I been searching for. But ran into problems using it on MySpace with my Div Overlay. Pics aren't showing up. Also Z-index on Myspace only goes to 9, after that it deletes it and puts
...

Trying to build a page for my friends band and I'm stuck with the thunbnails as a link to the full size pic in the blog. (which sucks @$$)

Any suggestions would be greatly appreciated!

If I can get this to work I'll be more than happy to put your popup linkback right at the top of the page... ...sorry had to wipe the brown off me nose.


I do art not code, but tinker a little. Here's the site if you can take a look.


If you can help, I left me email on here, if not I'll keep tinkerin' T'anks!
133.flag stk Comment
02/17/09
Hey Crazy Mick,

I took a look at the source on your page, but couldn't find PZ3 anywhere.

No reason you can't change the z-index to 9 (just chose 999 as a # above what most people would have for "anything else", so it overlies everything).

Can't account for what MySpace does or doesn't allow. Buy a domain ... they're cheap (less than $5 a month for an inexpensive hosting account). You'll have WAY more control.
134.flag The Crazy Mick Comment
02/17/09
I took the PZ3 out 'cause I couldn't get it to show the pics.
Changing the z didn't help any so I put it back as links to the blog for now. Thinking if I have to link, I should just put the full size pics on angelfire.com each on its own page and be done. Been tryin' to figure this out all yesterday, all last night and still up today.
(searching google) Think its time for sleep. All the codes are turning to a blur.

T'anks for lookin'
135.flag The Crazy Mick Comment
02/17/09
Just noticed your from Canada... My buddies are opening for the Candian band Ashes of Soma
136.flag Gordie Comment
02/24/09
Hi Scott. Regarding the comment here by Chris: Where do I replace the image that 'zooms', instead of the thumb?
I'd like to keep your base code as unmodified as possible. Meanwhile, I'm going to try putting the other image in background and see if that works.
137.flag stk Comment
02/24/09
Gordie - Can you tell me a bit more about what you want to achieve? It'd help. Thanks.
138.flag Gordie Comment
02/24/09
Hi,
Basically, I'm working through a solution at http://www.eyedeye.com/pr02.html, where the 'People Magazine' thumb results in a larger pageview. With this, I'm currently, dealing with z-index issues.
139.flag Gordie Comment
02/24/09
Gordie try setting your z index to a value not to auto

.preview:hover .big {display: inline; position:absolute; z-index:auto;}

z-index:1

I haven't really looked at your code in depth but just from scanning it that seems to be the problem z index of 1 will put that a z-index of 1 will be above the page content.

email me if you have any other questions.
Steve - funinmb.com
140.flag Gordie Comment
02/24/09
Ah, I always screw up the order, thinking that 1 is on top.
Doh!

I think I got it worked out, now.
Thanks!
141.flag fjpoblam Comment
03/19/09
I surely do appreciate your help: I've used it mi esposa's website, and those of several charity clients. The one problem (pop quiz for me) remains, to wit:

I've designed a layout with two floated divs: one right, one left. Inside the left-floated div is a right-floated PZ3. On a client's user's ANCIENT IE computer (Windoze 98, I believe), we get this symptom:

On hover, the pop-up image appears, floated with its right edge aligned to the LEFT edge of the original image, and NOT to the RIGHT edge as one (I) would expect.

Of course, YOUR website displays as it should! Do you have suspicions as to what I may be doing wrong?

(You may see all this on the website I added to my two sense, if you happen to have an ancient IE to try.)
142.flag stk Comment
03/19/09
fjpoblam - I do have old machines (one crappy Gateway Solo laptop in particular, would make a better frisbee than it does a computing platform).

We've also got a desktop running win98 and IE6, I believe.

Fire back your site URL, I *think* I might have an idea what the problem might be (shouldn't have said that ... I probably jixxed it now!) :p
143.flag fjpoblam Comment
03/19/09
OOops the example I quoted WILL be a two-column layout, one-right, one-left; it's currently three, all left. Nonetheless, the PZ3 is still in a left-floated div, as it will be, in the future.
144.flag fjpoblam Comment
03/19/09
stk the url is http://www.sfmga.org and you may see the PZ3s in the MAIN div, in the centermost column
145.flag fjpoblam Comment
03/20/09
stk, in case you're still watching: I made the grand update to http://www.sfmga.org (2-column layout instead of 3).

The described problem persists on small-screen (or should I say low-res-screen?) IE6. But the client seems "tolerant" for now... I'm still curious as to whether you've discovered a hint, though.

Thanks, much, again.
146.flag stk Comment
03/21/09
fjpoblam - (FWIW There's currently a column width issue in IE7 in addition to the PZ3 issue)

The PZ3 "open" problem is caused by a cascade conflict with these directives:

html { text-align:center; }
#wrapper { text-align:left; }

Removing these directives http://randsco.com/test/sfmga/ ">solves the problem - or - likewise, you could override add "text-align:right;" to the ".PZ3-r" selector to nullify the inherited text-alignment.

Text alignment is by default, left up to the user agent. When one assigns center|left to major divisions, it'll affect the alignment for every child element. (As a general rule, I recommend aligning specific elements, rather than whole divisions. By doing so, one avoida a battle between nested left/center directives.)

With CSS, sometimes less is more. Hope this helps.
147.flag fjpoblam Comment
03/22/09
stk: I implemented the body {text-align:center;} div{text-align:left} as a manner of ensuring cross-browser compliance - in various browser versions - by some practitioners, so...

I will diddle, as you said, with the PZ3 text-align:right ...

But if all else fails, then I'll remove the html/div stuff and see what happens. Thanks for taking a look! (I know my code, condensed as it is for quick load time, must have been hard to read!)

You're extremely kind and generous. Thanks again.
148.flag stk Comment
03/22/09
fjpoblam - FWIW, you might prefer to let your server compress the code, which would make it oodles easier to have both:

  • readable, human-friendly file to edit

  • compressed file for downloading


It's what we do. ;)
149.flag Nathan Comment
04/29/09
Question,

I am implementing your P3Z version on a site I'm writing for a hotel. The only thing I'd like to change is code for the last image on the page. When the image zooms it goes past the bottom of the page as it should. I'd like to add code to make the last image zoom up from the bottom outer corner rather than from the upper outer corner. I can't figure out a way to do it. I'm looking at your gallery code for hints but no luck.

Thanks
Nathan
150.flag ray Comment
04/29/09
Hey Nathan, thanks for asking for that fix! It's one that I would love to have, too.
151.flag stk Comment
04/29/09
Nathan - You have two options w/Pz3 - (1) Zoom the image up, as you've suggested ... or ... (2) Create padding so that the image has "space" to zoo into, from zooming down.

We've chosen (2) for our website, but either one is do-able. (The problem with (1) is that it's an image-dependent solution, as it requires knowledge of the image height)

Hmmm ... somewhere, I have an example of it ... *looks, but cannot find*

-stk
152.flag Line-hegith Etc… Comment
10/20/09
just wanna say 2 things

first these part are useless in your example:
a:hover .PZ3cap { padding:3px 5px; }
a:hover .PZ3cap,
(cause you can't find PZ3cap anywhere)

and 2/ this "margin-top:-3px;" on PZ31cap is used only there to fix a line-height problem but it's working only if ur using your font-size
a real fix would be simply to replace it by "line-height:1"

cya
153.flag stk Comment
10/21/09
Dear Frenchman with a very odd name,

1/ correct - You really want to ask a question here ;)
2/ incorrect - You should test your "fixes"

A valuable comment is one that shows me something new. (i.e., link an example).
154.flag Line-height Bonus Comment
10/21/09
10pt aprox 13px + 2px margin top + 2px margin bottom = 17px
  but ur getting 20px so ur removing 3px
  but try with another font size now - let's say 24px and check the height ur gonna be surprised
  you fix won't help this time :)
 
  also i have another question
  margin:-1px 0 0 -1px;
  and
  html>body .PZ3zoom a:hover { margin:-1px -1px 0 -1px; }
  are fixing what? Which browser it's targeting or filtering?
  same question for "html>/**/body" lines

of course i meant padding instead of margin :)
155.flag stk Comment
10/21/09
Dear Frenchman with a very odd name,

1/ Tried 24px - no surprises.

2/ Think "cross-browser fix for margining issues" (which makes PZ3 "rock solid" on hover)

Repeat: Link your "fixes".
156.flag stk Comment
10/21/09
Dear Frenchman with a very odd name - I have deleted all eight of your combative and poorly written follow-on comments. They do not constructively contribute to the discussion. I have, however, put you back on the correct path with your CSS - with examples - via email. Let me know if you need further clarification. ;)

A note to readers: I tend to answer comments "in kind". Your comment is likely to illicit a considered, detailed response if, when you suggest an improvement, you link examples. (This saves me time and I'm always keen on improving the underlying code). Although using your real name is not a requirement, if you do, I'm more likely to treat you as a 'friend I haven't met', rather than a stranger. The same applies to your email address, as I have been known to provide a detailed response via direct email, rather than clutter up the comments. Further, I'm no English teacher, but I find proper punctuation, grammar, spelling and capitalization easier to read and considerate. The tone of your email is important too, though I recognize that not everyone is a native English speaker and I try to make allowances for this. The bottom line: If you put effort into your comment, I'll put effort into my reply. ;)

157.flag Yenni Comment
02/02/12
I am attempting to implement this code on my portfolio website. I understand that there are plenty of differences between XHTML and HTML5 but I'm having the same problem as #88 where the caption is showing up in thumbnail view

The page I'm currently testing this on is here - http://yennibrusco.com/o-sites/tradart.html

On my local machine the images show up properly but with the caption visible (http://imgur.com/RWLwI). When I push it all to the server however it shows up like the link above.

I'm not sure why the validation site I use tells me that using the same id more than once is a problem either I've never encountered a problem with that. But that's the only validation error on that page.

I know it's been ages since you've updated this...but it's still the best one I've found.
158.flag Yenni Comment
02/02/12
1st issue of the server differences was fixed. the CSS file hadn't posted for some reason. which caused an entirely different one of the images stretching to their normal height but the width being thumbnail sized.

Same example page.

I may hunt down some web dev friends to help me sort this out...I think it might be PEBKAC ("Problem Exists Between Keyboard And Chair") error