Popup image viewer

[meeeeshstx]

1) Script Title: Popup image viewer

2) Script URL (on DD):
http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer

3) Describe problem:
I've tried to place this script in my wordpress blog. First I inserted the css in my current themes style sheet, but I wasn't getting any image to popup, only the caption. Then I inserted it directly into the header and it works... sort of.

I'm using a text link rather than thumbnail. Instead of getting the full-size image to popup, I get a very small thumbnail of the image, and the caption below it.

I sample can be seen here, the popup link is Goliath in the 4th paragraph:
http://massagestcroix.com/stcroixblog/reviews/fitting-a-week-end-into-one-day/44/

This happens both with FF on a Mac and IE7 on a pc.

Any suggestions?

[jscheuer1]

You have a style in your style.css file:


p img {
padding: 0;
max-width: 100%;
}

Since the image and its span and link are inside a paragraph (<p>) element, the above style applies. The padding is overidden, but the max-width is not, by this style on the page:


.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

The net effect of that is limiting the width of the image to, presumably the width of its parent element. As, the parent is a span and/or an anchor link (to have real layout width it should be a block level element, or at least not absolutely positioned and hidden, as is the span element), various browsers will interpret this differently, but typically from 0 to 100% of the offsetWidth (the length of the word Goliath in this case).

You can either remove the max-width style from the p img selector, or override it here, like so:


.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
max-width:none;
}

Tested only in FF.

[meeeeshstx]

Thanks John. I'll give it a shot and test it out.

Edit: Cool. Worked like a charm. Thanks again.