Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

random top 40

CSS Photo-Caption Zoom

Filed in:CSS
b2evo·XHTML

CSS Photo-Caption Zoom

January 31st, 2005  · stk

Finally ...

On the left is a demonstration of the original version of photo-caption zoom. It's a pure-CSS, XHTML-valid, image/caption zoom method. Move the cursor over the image and it will 'zoom' (pop, explode, magnify) to reveal a larger image with a caption. There are a number of image rollover techniques, but this is the first that combines an image with a caption. It looks nice and saves page real estate, sitting as a small thumbnail, until the reader decides otherwise. Most important, the method is practical and easy to implement.


PZ3 Update: 10-Mar-2007 - Fixes for an IE7 bug (multiple right-floated images) & a work-a-round for IE6 and IE7 in quirks-mode.

Added July 2006: PZ3 is here! It's more robust, lighter and REPLACES PZ2. Compared to PZ2, PZ3 is easier to use, needs 72% less code, overcomes a pesky IE z-index problem and can use an infinite range of image sizes (image size is specified in the XHTML, not the CSS). Like PZ2, Photo-Caption Zoom version 3 overlays text. (See demo on the right).

Added Oct 2005: I've developed a more robust "version 2" (named "PZ2"). It adds functionality (and complexity) to the original, PLUS has the added capability to OVERLAY text (no more "element migration" on ZOOM). It is demonstrated here on the right.

A single image is used for both the small and large views. (No need to have a large and a small version). The width is the only size parameter needed (the surrounding <div> expands to the appropriate height). To float the image left or right and to use different images sizes, just use the appropriate class names from within the HTML (no need to modify an external CSS file).

This code is a result of my recent inspiration and chronic frustration regarding the presentation of images and photo captions on web pages. Below, you'll find 8 different image zoom techniques, all of which are demonstrated on their own page & include cut'n-paste CSS/HTML code. Take your pick.

They've been tested on a PC, using IE6(sp2) and FireFox(v1). I'm not sure how they'll render in different browsers or browser versions. All but two are pure-CSS solutions (two use JavaScript :> ) and all are XHTML-valid (verified with the 'validate' button on the footer bar).

Motivation

We've all seen this: "Click to see a larger version." (A new window takes over our screen and we wonder why the larger version is nearly the same size.) HTML makes it tough to present both thumbnail & full-scale versions of image data. If that's bad, it's even worse when it comes to the accompanying textual metadata - the caption.

Early on (or, in computer terms, the "Dark Ages") I used Microsoft Front Page to make my pages. Led by the nose, I merrily made large and small images, wondering just how tables could be effectively and efficiently used to render captions. I found a way, but it wasn't at all efficient. I ditched it because it was too cumbersome.

Why aren't caption tags associated with images and not tables? Who made that decision? Why can't one just add a caption attribute to the <img> tag, like 'alt' or 'title'? (I've used both as a captioning tool. It works, but only barely. There's no formatting and the bubble text disappears if you don't keep moving the cursor over the image).

A better way?

Because we just recently moved our pages from a free-host to a pay-host and began using "b2evolution" journaling software, we thought, "why not revisit the whole image-caption issue?" A Google search led me to "Simple Bits", where Dan Cederholm demonstrates a Photo Zoom example.

It zoomed a photo, without a caption, but it was pure-CSS. I downloaded the code & upon closer examination, quickly realized that this method was not practical, but it did provide inspiration & opened up several other avenues to examine.

More searching led me to two other sites: Paul Griffin presentes an elegantly simple and much more practical, technique; and Stu Nicholls at the "CSS Playground" demonstrates a unique CSS method to magnify an image and overlay it onto page text. Both methods showed promise of practicality, though neither dealt with a caption.

A picture may be worth a thousand words, but I've found that many pictures are mute when it comes to important things like "who", "when", "where" (and sometimes, surprisingly, even "WHAT"). An accompanying caption can add vital data to the visual image (metadata). But oddly, the lowly caption is often overlooked and not seen on web pages. Online photos are a lot like an 'inside joke'. Without the accompanying caption, you just don't 'get it' (to understand, 'you had to be there').

My search, didn't yield an 'out-of-the-box' solution. If there is a solution out there, I didn't find it. But, the three photo zoom techniques gave me hope that I might be able to design something on my own. That's what I did. Below are EIGHT different photo zoom techniques. Each one links to a demonstration page, which includes notes on the technique & cut'n-paste code. Three are merely replicas of the previous work (a synopsis and archive). Five are of my own making, two of which, are nearly identical (one uses javascript and the other doesn't) & offer practical solutions to the problem.

Photo-Only Zoom Methods

Photo and Caption Zoom Methods

  • No. 1, A Pure CSS Zoom "Kimler Caption no. 1" - (Adding a caption to Stu Nicholls' design)

  • No. 2, A Pure CSS Zoom "Kimler Caption no.2" - (Adding a caption to Paul Griffin's version) "Original" Photo Zoom

  • No. 3, A Java/CSS Zoom "Kimler Caption no. 3" - (Adding JavaScript to get what I want)

  • No. 4, A Pure CSS Zoom "Photo-caption Zoom Version 2" -or- (PZ2) - (Added functionality, Photo-overlay-on-Zoom technique) (Added Oct 2005 - PZ2 "the better Zoom")

  • No. 5, A Pure CSS Zoom "Photo-caption Zoom Version 3" -or- (PZ3) - (72% Less Code than PZ2, overcomes an IE z-index problem. Photo-overlay-on-Zoom technique) (Added Jul 2006 - PZ3 "the EZ-PZ ZOOM") (Updated 10-Mar-2007)

What do I want?

The answer, of course, is a moving target. Just a few weeks ago, I was happy to find a non-tables, <div>-solution that was XHTML-valid (no zoom). I began my quest because I thought that 400px images were taking up too much page real estate. When I found Dan's image zoom, I became hopeful that I could find a rollover image zoom that was utilized a caption. I didn't. So I made one that incorporated features I deemed important.

Here's a list of important design criteria:

  • Practical: First and foremost, the method must be easy to use. Adding an image and caption should be done in one spot, with little image editing required & markup accomplished in one file, in one location.

  • One Image File: I don't want to be bothered to make a large AND small image file and I don't want two images in one file. It takes too much time to do that for every image. I want a thumbnail AND a larger image to come from one file.

  • Specify either height or width, but not both: If I had a dollar for every time I displayed "properties" or opened an image editing program to see what the height and width of an image is, I'd have enough money saved to send Alex to University (maybe a Private one)! I want to specify one and let the <div> or <img> tags figure out the other dimension. It's a computer - COMPUTE!

  • Specify the width/height in the HTML: I want to be able to change image sizes on the fly, as I write. I don't want to have to traverse over to another directory, find the correct CSS file, and add ANOTHER width/height set of numbers to the growing list of available image sizes.

  • XHTML-valid code: I want well-formed pages.

  • pure-CSS: I don't want a java applet that requires some version of java that readers don't have. We've already got a slide-show viewer that (it seems) half the World can't load. Geez. I take the time to make this stuff, I want people to see it. They don't care about browsers or browser versions (and frankly, I don't want to either, but don't get me STARTED on that topic!)

  • No tables: I'm off tables. Finished. Finito.

  • Nice-looking caption that's attached to the photo: I want something that is pleasing to the eye and is easy to modify. (This blogging tool has some nifty code-insertion buttons on the editing page, which I can customize to whatever set of HTML code I want. Ultimately, that's what I've done - program in my final HTML code. Hit one button and several lines of code are added - BINGO. Just need to pick right/left, image file name (most of it's filled out) and type your caption. Simple.

What did I get?

A headache! Trying to bend CSS to your will is like pushing on a balloon: fix one problem, but one pops up somewhere else. "Kimler Caption no.2" (the pure-CSS solution) requires the image width to be specified by the CSS. "Kimler Caption no.3" specifies the width in the HTML, but is not a pure-CSS solution (using JavaScript "onmouse" functions) and has a glitch in FireFox, which is more pronounced when the image is floated right. (See the demonstration page to see if you can spot the problem).

Which method is best?


Added Jul 2006: We're now using PZ3 for our pages, so we consider that "best". It is much easier to use than PZ2 and it fixes a z-index problem with Internet Explorer v6sp2. There's still nothing "wrong" with the "Original" Photo-caption Zoom.

Actually, these blog pages incorporate all three! There is no conflicting code. Run one, two or all three. Each work independently of one another.

The choice is yours.


My answer was different this morning, than it is this evening. While I was writing this blog, I discovered with longer captions, both methods were failing. Fixing the pure-CSS version (no.2) was easy, but fixing the Java/CSS solution (no.3) was its undoing. Trying to marry the 'onmouse' functions with 'a:hover' CSS has been a challenge. Though a fix was obtained (and it works in both MSIE6 and FireFox), there is a visual 'glitch' in FireFox when you exit the image through its base (it's more pronounced when the image is floated to the right).

In the end "Kimler Caption no.2", the pure-CSS version, is best. Initially, I thought the CSS code would be bloated, but by combining selectors, the CSS footprint is reasonable. Once can use multiple class names in the HTML like passing variables to a script. Take a look at the final 'production' code for this version and you'll see what I mean. One can select a RANGE of images widths from within the HTML file (i.e. - 200px to 600px, every 50px), eliminating the need to modify the CSS file. Resizing the image to a multiple of 50px isn't a bother. I normally edit photos anyway (to crop them and reduce their JPG quality to make smaller files). It's a pure-CSS solution that doesn't have ANY visual problems (in MSIE6(sp2) and FireFox(v1) anyway). Feedback on other browsers & versions will be appreciated.

Have a look at each and decide for yourself.

The sticking point.

At the end of the day, the problem comes down to this:

  • The pure-CSS method does not allow for the specification of the a:hover pseudo classes for the anchor <a> tag within the HTML code (inline). I found a "Syntax Rules" document at the World Wide Web Consortium (W3C) that gave me hope: Syntax of CSS rules in HTML's 'style' attribute. It showed the exact syntax for this situation, but it didn't work. That part of the specification was never implemented.

  • THe JavaScript method cannot employ 'onmouse' functions on objects it can't actually 'see' (the caption display is set to 'none' & isn't visible to the 'mouse').

However, the pure-CSS version is visually-pleasing, XHTML-valid and easy to use - "Kimler Caption #2". I hope that you find it useful and feedback is appreciated.

(Permalink)
Views: 321633 views
74 Comments · GuestBook
default pin-it button
Updated: 5-Jan-2008
Web View Count: 321633 viewsLast Web Update: 5-Jan-2008

Your Two Sense:

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


Subscribe to Comments

Auto convert line breaks to <br />

1.flag Anne Comment
02/07/05
this seems to be very promising.
I gave it a very quick look, I know the principles, now I will *try to* implement it in my site.
2.flag John Comment
02/12/05
That is seriously smart - love it!
  I'm no programmer, but I can cut-n-paste with the best of them, I would appreciate some idiot guidance notes on what I need to tweek in the code to implement this in the [b2evolution] editor toolbar.
  Thanks,
John
3.flag Justin Comment
02/22/05
Wow! GREAT idea! I've been looking for a solution almost just like this, and with a single exception you've hit nail on the head.

I put a trial run on my website as well, I'm interested to see what my readers think :)

The only difference I'd LOVE to see, and I'm not sure if this is possible, would be if the larger image could just overlay the rest of the webpage while the mouse is over the thumbnail (as in Stu Nichols' solution) rather than push the rest of the content downwards. Or would doing something olike this absolutely REQUIRE two different image files? Just some food for thought...the shifting of the content can be somewhat distracting at times :)

Anyways, good work!
4.flag Vincent Comment
02/23/05
I can't believe this great effort you guys did, it's the best thing I've seen online in AGES!!! Take a bow! Super-brilliant!
03/22/05
Trackback to Scott & Rachel's Adventure Pages
"On the right is a demonstration of a pure-CSS, XHTML-valid, image & caption zoom. Move the cursor over the image and it will 'zoom' (pop, explode, magnify) to reveal a larger image with a caption."

I got this off of the b2evolution development ma...
6.flag Bomani Comment
04/19/05
I've searched your site and I'm trying to find explicit instructions on "how" and "where" to enter the code to use the Photo-Zoom feature on B2 Evolution websites.

I see the code (html, css), but I have no idea on where they should be inserted.

Please help!
7.flag stk Comment
04/19/05
Bomani - The photo-zoom is intended for a wider audience than just b2evolution users, but since I have profiled the technique on the forum, a b2evo-specific install tutorial would be a good thing! (Maybe I'll use you as the guinea pig?)

I have emailed you privately and will work with you to get it going on your site. How's that for service? ;)
8.flag rocketdyke Comment
04/27/05
Looks fantastic! Stellar idea. I don't know if I will use it just yet on my site, but the proof of concept is pretty cool.

I have played with CSS rollovers, and had a lot of success with them.

Oh, for some reason Safari 1.2.4 doesn't re-draw the text properly AFTER the zoom has gone back to original size. As it works fine in firefox, I blame safari. We'll see what Friday's version of safari does with it.

-Rocketdyke
9.flag bomani Comment
04/29/05
I got the files loaded and working!

Thanks for a GREAT feature and of course, the email chat support.
10.flag Paulo Franša Comment
08/05/05
I run on Windows 2000 using IE v6.0.2800.

I installed the pure-CSS version ("Kimler Caption no. 2"), I got it running fine, but in order to get the "a:hover" without the underline, I had to add "text-decoration:none;" to the ".Zoom a:hover" selector.

After that, it all worked very good.

Many thanks for your work. Really useful!
11.flag stk Comment
08/05/05
Paulo,

Glad you like the pure-CSS photo zoom. Thanks for taking the time to write.

You are correct. Our site (by default) already employs a "text-decoration:none" for links, so it was omitted from the CSS file. I should add it.

-Scott
12.flag Sieg Comment
04/16/06
Hey Scott,
I want to put the PZ3 into operation where to i paste the code?
13.flag Chris Comment
07/31/06
Is there a way to make the rollover effect stay upon a click?
14.flag stk Comment
08/04/06
Chris,

AFAIK, the only way of doing that would be with javascript.

I've not looked into it, too much, but could see that it would be a nice (added) functionality.
15.flag Ankush Comment
08/24/06
great script ... in my case, I had to tweak a little for IE (legacy ASP app)

thanks,
Ankush
16.flag stk Comment
08/24/06
Ankush,

LOL ... if only I could get Bill Gates to pay me $1 for every time I had to "tweak" IE ... he'd be a lot poorer and I'd be a LOT richer. ;)

Glad you like it!!
17.flag Drew Comment
11/07/06
Scott - you could certainly play with having this operate via mouse click. Try the :active or :focus pseudo-classes instead of (or in addition to?) :hover.

Push the envelope :) - I managed to come up with a textual-markup-only 'image map' with that in mind.

Great idea going here. Similar in nature to another thingy I built - but your work is way more mature and lightweight. Nice.
18.flag stk Comment
11/07/06
Drew,

Thanks for saying!

I have had a stab or two using pseudo-classes, but was unsatisfied with the results (and disparity with IE).

I've even thought of going with JS to add the "clickage", but am loathe to introduce it.

I am quite intrigued by the page you built for your mate's band. How did you achieve the Band Member roll-overs (the alpha transparency look in IE6?). Neat.

Cheers,

-stk

19.flag Drew Comment
11/07/06
Scott, are you referring to the rollover action, or the transparency effect?

For the latter, use:

#thisIsAnIeOnlyThing {filter:alpha(opacity=70);}

I slapped together some code loosely based around what you have going here... behind a firewall right now, but will FTP it up tonight at home and re-comment with an example.

Yeah, psuedo classes are lame in IE6. Anchors only. I've even had a:hover not work until I did some crap like {border:1px solid; border:none;} to kick it into gear.
20.flag Drew Comment
11/07/06
:active and :focus example

the same thing but with :hover

Wasn't too bad... IE was silly, found an obscure "hidefocus" attribute to make the focus rectangle not rendered.
21.flag stk Comment
11/07/06
Drew,

Cool! Although, there are behavior differences in IE/FFox and Opera.

Oddly, I preferred Opera (click-zoom; release-unZoom).

Firefox has an annoying 'back-to-the-top' scroll, for images part-way down the page.

Both FFox and IE had to click (outside of pic) to unzoom, which I find a tad counter-intuitive (would be better if clicking inside the image, after zoom, would unZoom).

Shows some promise though. :D Thanks!! (Do they overlap correctly if positioned closely? - Tis fixed width and I can't tell.)
22.flag Drew Comment
11/07/06
Yeah, I have it set so that each anchor has position:relative; but no initially declared z-index. Declare a z-index value on :focus, poof, proper overlay.

Due to differences between most browsers and IE as far as their take on the various pseudo-classes, I'm thinking that a tad of helper JS might be in order to get every bit of desired functionality.
23.flag Drew Comment
11/08/06
Version that behaves much like Opera across all browsers. Use of :active only this time... had to include an onmouseup function to kick IE.
24.flag stk Comment
11/08/06
Drew,

This is almost exactly where we ended up with our testing, some time ago.

Opera has problems. My mate reports that it doesn't work, with JS disabled, in FFox v1.5.0.7 (though it seems to on my version?)

To pass the litmus test, it needs to:

1) Work with similar behavior across many browsers / platforms (IE6, IE7, FFox, Opera, Safari, & AOL for sure).
2) Degrade gracefully with JS disabled ( or better - work w/out JS :p ).
3) Zoomed images must overlay all other elements (overcome the z-index issue in IE) - except windowed elements, of course.
4) Work when pages are served in quirks-mode.
5) Right-floated images open from upper-right, left from upper-left.


I don't want to discourage you. You've got the right idea and have arrived quickly at a high-level 'solution' (tho I'd recommend declaring a doctype and encoding for your page, using "type=javascript" instead of "language=javascript" (which is deprecated) and provide for multiple onload events).

Maybe there's a way? We haven't found one yet and while yours appears close, it hasn't passed the litmus test.

Hope this helps. I look forward to seeing if you can crack this nut!! Keep growing with your web work, you've got real talent!
25.flag Drew Comment
11/08/06
Yeah, the thing here is there's a quagmire of options. I'd say an "array" of options if it weren't for the fact that, after sharing with my office mates, I got a thousand and one opinions on how to do it - including one person claiming that downloading a large image that a user might potentially never even interact with in full-dimension mode is "lame."

Bah, can't please everyone =)

Btw, the reason I took such interest in this is because you came up with an idea that uses light code to toggle content in some way *without changing the height of the document* - I hate it when the page jumps when I don't expect it to... "tab boxes" and the like tend to do that across a lot of sites.

Speaking of - it requires javascript to permanently swap the content - but there is a way to make a font-scalable tabbed content box that doesn't change its height when you swap content. Think: hidden-overflow container, children with 100% width and 100% negative right margin (effectively laying them on top of one another), relatively positioned out of the box (invisible), and brought into view by using position:static (thereby ignoring left and top values).

Thanks for the kind words.

Almost forgot, since you seem to be in the CSS-only camp, you might like this - only works in browsers that support adjacent sibling selectors.

CSS-only photo slider - hover over the top thumbnails - drawback is that it requires a LOT of CSS - just a proof of concept
26.flag Anonymous Comment
04/27/07
Scott, you're a Godsend for offering all the information on your site about Magnified Images with Captions.

I've been looking for YEARS for a "smart" way to do this.

I finally found my answer on 27-Apr-07. Works like a charm.

Thanks a zagillion!
27.flag Misty Comment
10/16/07
Dear Scott,

I've found this gem - Photo Caption Zoom while dreading if I would go forward with creating smaller, larger images and another html page for the larger image and etc.

This tool is easy to be understood and integrated with Wordpress Write Page. Thank you so much for helping a beginner of CSS and XHTML like myself in making PZ3 work on my blog. Your instructions are precise and efficient.

I will promote your product to anyone and anytime.

Thanks a million factorial (1 million!) !

Misty
28.flag Fernanda Comment
11/09/07
Like Bomani, I'm trying to find explicit instructions on "how" and "where" to enter the code to use the Photo-Zoom feature on B2 Evolution websites. I have no idea on where they should be inserted. Please, could you help me? Fernanda.
29.flag stk Comment
11/09/07
Fernanda,

I have two older tutorials here and here, but the b2evolution version (and file locations) have changed and the PZ code is now at version 3.

The basics are still the same though:

1) Copy the newest CSS into your skin's CSS file (at the bottom).
2) Make a quick-toolbar button that holds the newest XHTML (from same PZ3 page above). The file you need to edit should be in the /plugins folder and called "_quicktags.plugin.php".
3) Modify "_formatting.php" (in the /conf folder) so that all the new tags are allowed. (This page talks about how to do that).

Then you're done. :D

Give it a whirl and if/when you get stuck, just use our contact form and I'll give you a hand when I have some time.

Cheers

30.flag Trevor Comment
11/21/07
Thanks for the great script. I am pretty inexperienced when it comes to this kinda stuff, and seem to be having a issue on a test page i did. it seems that the imaes flicker, but wont stay solid. also seems to be a gap between the thumb and zoom image. Any help?

http://stitchtest.000webhost.info/zoom.html
31.flag stk Comment
11/22/07
Trevor,

1) The picture is 400px wide (not 479px) - correct that in the PZ31cap SPAN.

2) The shift results from the combination of text-align directives in the #container & #holder DIVs. Remove those and you'll be fine.

3) Also, while PZ3 is free for personal use, a donation is required, when used for commercial purposes. ;)
32.flag Trevor Comment
11/22/07
Thanks for the help. I played with all my html and css this morning and have it working great. Thanks again, I sent a donation and will have a link back for you.
33.flag stk Comment
11/22/07
Trevor - Thanks for the donation & linkback. :D Glad you got your page sorted.
34.flag Ross Comment
01/25/08
Hey just wondering is there any way to set if the zoom expands down and right or down and left. i.e. at the top of this page the first image zooms down and right and the second image zooms down and left - on a private page im working on (not online yet will post link/linkback once its up!) an image, which is on the left hand side of the page, zooms that direction also whereas id like it to zoom to the right
35.flag stk Comment
01/25/08
Ross - I look forward to seeing your page, as I'm a tad confused about your question.

All three of the Photo-caption Zoom versions utilize a toggle switch (in the class-name) to determine zoom "direction" and float.

Generally, [L]eft-floated images expand down and to the right (into the page) and [R]ight-floated images expand down and to the left (into the page).

(e.g., The first image on this page uses PZ1 -the original version- has a "Cleft" class-name. The 2nd image, which is a PZ3 construct, uses "PZ3-r" classname, where the R = "right")

Check the XHTML notes in the above links. ;)

I hope this answers your question.
36.flag Ross Comment
01/25/08
Thanks for the help the -r and -l sorted it all out! Thanks for a great product with this aswell, its a very useful and nice bit of code. Once the page im working on is up i'll post ya a link - cheers again,
Ross
37.flag Drew Comment
03/25/08
Scott,

Great code; I'm finding it helpful. Although, for some reason, I'm unable to get the "margin-right: 101%" tweak to work in IE7. Any ideas?

PZ3 in action

Thanks,
Drew
38.flag stk Comment
03/25/08
Drew - That's a quirks-mode tweak, but your page isn't a quirks page. The problem appears to be the explicit "text-align:left" in div#right. Remove that and your IE7 cascade conflict will disappear. ;)

PS - Please have a look at our copyright policy. I'm assuming you're planning a donation? :D
39.flag Mars Comment
03/26/08
I'm really new at this and I just wanted to know where you get this code, what language it's in, how you guys know so much stuff and where I can learn it?

thank you.
40.flag stk Comment
03/26/08
Mars - It's plain old HTML (well, the new, standard's flavor - XHTML) and CSS. It's the stuff that standard web-pages are made of. Nothing fancy. :D

We invented the photo-caption zoom technique - pushing XHTML and CSS a tad past where it was intended. Pretty cool what you can do with plain old HTML and CSS, eh? ;)

A really good place to learn more is with the free w3schools [ XHTML and CSS ] tutorials.

The rest is all practice and play!
41.flag yosax Comment
03/29/08
Did you know how to make the roll over image like in Amazon?
There's a tiny image, and when we roll over the mouse on the tiny image, another different large image has change. This is the Amazon sample
42.flag stk Comment
03/29/08
yosax - yes, but better. (Amazon's depends on javascript and fails when visitors have javascript disabled, like I do in FireFox).

PZ3 can be modded to do that AND doesn't depend on javascript. (Have a look at this post, which demonstrates a version that's closer to the Amazon example you provided).
43.flag yosax Comment
03/29/08
Can you provide me with the modded codes for that page?
44.flag stk Comment
03/29/08
Already provided! The code you seek is ON that page. ;)
45.flag Mars Comment
03/29/08
thank you STK you rock!
46.flag yosax Comment
03/30/08
Hello again STK.
Your codes working great on Mozilla. But I still don't know how to fix the IE issues since I'm a novice on CSS.
Would you please help me which codes should be added to fix the IE issues?
Thanks.
47.flag yosax Comment
03/30/08
Forget my previous comment...
I finally found it... :)
It's on :
base href="http://randsco.com/blogs/skins/rands/
and
link rel="stylesheet" type="text/css" media="screen" href="rands.css

Thank you STK
48.flag Karl Comment
04/19/08
Just found your page. What a great job you've done!
I cobbled up a test page and things work as anticipated EXCEPT I can't see a method to get an image to expand left (or right) and UP. Default seems to be DOWN.
Any ideas what I can do?
Thanks
49.flag Karl Comment
04/19/08
OK- guess I questioned before thinking :)

What I want to do is display the mouseover image centered and above the thumbnail by X px.

You can see the problem I am having on the cobbled page http://www.piratesofemerson.com/ship/index1.shtml Since the thumbs are on the bottom of the page, the expanded images can go off the bottom and require a keyboard scroll to get there!

Just use a few on the left.

I think I would like to define absolute coords for the expanded images. Maybe something like you have done with PhotoAlbum - but I don't know how!
50.flag Dennis Comment
04/29/08
This is too cool for words! BUT as I manage the starving wife/artist's website, I appear to have difficulty because of the tables or perhaps its just me - sigh! I am trying to further expand on the image page.
51.flag stk Comment
04/29/08
Dennis - you might find this an interesting read (tables are a horrible construct and should die already).

Thought your wife's portfolio page looks rather nice, as is. (Could see PZ3 used with some of the inline images on the other pages, like the bio page) ;)
52.flag Dennis Comment
04/30/08
Hi guys. Yep great info!!!!Further to my email, I tried to circumvent the tables problem, using your XHTML wrap around suggestion, on the page http://www.dianemichelin.com/ff-End_Of_The_Run.html but the strangest things happened - sigh
53.flag stk Comment
04/30/08
Dennis - Just sent you an email reply. ;)
54.flag Dan Comment
05/02/08
Everything was working fine until...

I bookmarked this page:
http://randsco.com/_miscPgs/cssZoomPZ3.html

and then afterwards whenever I hover over the images, or anything linked, the linked object or text flashes in and out of hover and regular link.

Bizzaaro...
I've seen this before, and I have no clue why it happens.

STK EDIT: I emailed Dan. The odd behavior he experienced was caused by a problem with his browser. ;)
55.flag Arsalan Comment
05/06/08
GREAT WORK MAN !

IM IMPRESSED ,...TOTALLY IMPRESSED, WAS SEARCHING FOR THIS FOR A LONG TIME ...

THANKS BRO..
56.flag stk Comment
05/06/08
Arslan - Glad you like Photo-caption Zoom! (You should limit the number of cups of strong Turkish coffee you drink though.) :p
57.flag Tiina Comment
05/11/08
It's almost perfect.. I'm just wondering: how can I get the image to zoom upwards? If the pic is at the bottom of the page and no scrolling is enabled, pic doesn't fit to the page.

Please help me by answering to my email... :)

Tiina
58.flag stk Comment
05/11/08
Tiina - Have a look here. ;)

(Note: I solve the "if the image is at the bottom" by having 300-400px of extra padding - or is it margining? - at the bottom of our layout.)
59.flag Tiina Comment
05/11/08
Yeah, that's exactly what I meant. BUT.. I can't find the tag that changes the angle, maybe I'm just blind but I wen't through the page and the code couple of times..

Could you please tell me the exact command? ;)

Thanks!
60.flag stk Comment
05/13/08
Tiina - If you "view source" on this page, you'll see the following bit in the CSS:


/* New Anchor Points
 * For top two images
 * Note: It's a PER-image thing, using margin to position the "opening",
 * to defeat the IE z-index issue. */
.PZ3zoom.BTTM1 a:hover { margin-top:-227px; }
.PZ3zoom.BTTM2 a:hover { margin-top:-218px; }


<!--[if IE]>
 <style type="text/css">
 /* Might need to position things a tad differently for IE */
  .PZ3zoom.BTTM1 a:hover { margin-top:-222px; }
  .PZ3zoom.BTTM2 a:hover { margin-top:-215px; }
 </style>
<![endif]-->

<!-- END New Anchor Points -->


If you look further down, in the XHTML, you'll see where the "BTTM1" and "BTTM2" classnames are added.

While possible to open from the bottom, it's a lot of extra work. Why? Because for each different image/caption height, you'll need to determine the correct negative top margin and specify it, on hover. :(

(This is why we've solved the problem on our website by providing extra padding at the bottom of the content wrapper ... to give images at the bottom of the page, some "space", to zoom into.) :D
61.flag Charlie Broomfield Comment
06/25/08
What a fab tool! Just what I have been looking for. I wonder if you can help me with one point? I notice that the thumbnail is a little grainy and was wondering if there is a way to tweak the code so that I can use a separate small/large image and thus maintain the quality of both?
Many thanks.
Charlie
62.flag stk Comment
06/25/08
Charlie - This is a first ... someone actually wanting to do more work!

Photo-caption Zoom was designed (in part) to be easy to use and the trade off for a slightly pixelated thumbnail, versus having to make, upload & serve two separate images was thought to be worth it. ;)

However, it is entirely possible to tweak the code and serve a separate thumbnail image and zoomed image. The key is adding another <img> tag to the XHTML for the thumb and changing the CSS to display it, instead of resizing the larger image. :D

EDIT - You can see an example (uses the same image - what can I say, I'm lazy - but the 2-image method also provides the ability for the zoom to show up off of the thumbnail): Here .. Commercial example (different images ... older code) here
63.flag Charlie Broomfield Comment
06/25/08
Hi, thank you for your reply. I got as far as adding the smaller image to my html but am afraid I am not clever enough to adjust the CSS :0) Is there any CSS out there which demonstrates?
Best wishes.
64.flag stk Comment
06/25/08
LOL Charlie, you're too fast at reading. (Look again, as I've added a couple of examples).
65.flag Charlie Broomfield Comment
06/25/08
LOL! Too fast at reading - what a nice way of saying I am impatient!
Thank you for your help, I appreciate it.
66.flag Steve Comment
08/02/08
Hi, I've applied the 'Kimler Caption no 2' method to a site I'm working on but I've absolutely positioned the zoomed images and the caption. It works perfectly in IE7, Firefox & Opera except that when I try to enlarge the caption font it just repositions the caption further down the page.

Also, the image rollover doesn't work at all in IE6 and it requires a few attempts to get it to work in Safari.

I'm pretty certain that it's the absolute positioning that's causing the rollover problem but it's important that the zoomed images appear in the same place on the page.

Is there a solution to these problems?
67.flag SoftGage Comment
08/12/08
Hi Randsco,

I use a simple tag in the html code for image size to increase using onmouseover and onmouseout.
my question is: how do i relocate a larger example of image somewhere else within a divider using this same code?
68.flag Cindy Comment
10/12/08
I am a total....and I cannot even stress the word TOTAL newbie... I am 9 weeks into HTML class...that is how new and I am mesmerized by how BRILLIANT YOU ARE! I may never be able to understand all your code (sure gonna try) but man, you are simply amazing!!!!! I used your code on my little ol table sight/homework and made sure everybody and their dog will know about you! thanks so much for sharing your brilliance!!! In total admiration, Cindy
69.flag Laura Comment
03/14/10
HELP! Haha I love all of the info on this page, but I need just a tiny bit of help...can't get this figured out...I'm using the Kimler Photo Zoom No3, because it works the best for my website/portfolio page. I have figured out how to fix/change sizes around for my images. But the one thing I haven't been able to figure out is how to have my thumbnails lay side by side and not overlap. (As I am trying to use this with multiple photos in a row)
Any Ideas? :-) Thanks!
Laura
70.flag stk Comment
03/14/10
Cindy - You surely flatter me! Thanks.

Laura - I have an idea! Post a link to the page you're trying to make!
71.flag Laura Comment
03/14/10
Ok :-) Here is what I currently have - http://site.ldsgraphix.com/Portfolio.html I've just been working with two photos trying to get it perfected, but I will have around 50 on the page at a time. The Two problems I've noticed is 1-I can't get the thumbnails side by side and 2-when you hover over the first thumbnail - the second thumbnail covers the large first thumbnail. Any ideas or things to change are appreciated :-) Thanks!
72.flag stk Comment
03/14/10
Laura - It looks to me that you are trying to adapt Stu Nichol's code, which isn't the same as Kimler Caption #3.

You might want to have a look at our Christmas Gallery ... which solves both your issues. (Stu's code isn't designed for a gallery).

The difficulty is where to place the "zoom" image. For photographers, I'd recommend a fixed screen zoom along the lines of this simple CSS gallery (can be modified to handle different aspect ratios and captions, if desired).
73.flag Mark Comment
03/20/12
Nice article.

I am interested to know if the zoom image can happen upwards, instead of downwards.

In other words, in your examples we see the image being expanded from the left top or right top.
But how do I make the image expand from either the bottom corners
74.flag stk Comment
04/08/12
Mark - It is possible to have the zoom open from the bottom left or bottom right (or anywhere else, for that matter). However, it requires a per-image solution (unless all the photos are the same aspect ratio and size). It it controlled by margining the zoomed image. Have a play and let me know if you need help. - Cheers, stk