Click to See Complete Forum and Search --> : How to get pop-up images to display fullsize in MSIE


blakekr
06-18-2007, 10:07 AM
I have a number of really huge images on my shopping cart (color and style options) that MSIE, unfortunately, scrunches down into an unreadably small graphic when I link to it. (I know you can click on the graphic to see it full size again, but most of my visitors don't).

I thought I'd get MSIE to display these images full size by creating an inline javascript popup link like this:

See all our <a href="/skin1/images/labels/widget.jpg" onclick="window.open(this.href, 'child', 'scrollbars,width=620,height=1244'); return false">Widget Label Colors</a>

But unfortunately MSIE ignores the page size parameters and still displays the image in unreadably small form.

Is it necessary to create junk html pages just to hold these images so I can get them to display at normal size, or is there some more elegant way to do it?

Fang
06-18-2007, 11:00 AM
Works as expected in IE. The window size will, of course, be limited to the users screen size.

blakekr
06-18-2007, 11:13 AM
I don't really understand the response.

Windows don't display at screen size when they're html pages; they show scrollbars for the overflow. Images unfortunately don't.My question is how to get MSIE to display a large image at full size, with scrollbars if necessary.

Fang
06-18-2007, 12:17 PM
Open in a valid document:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>large image</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
function popup(image) {
var doc='<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">'+
'\n<html lang="en">'+
'\n<head>'+
'\n<title>image<\/title>'+
'\n<meta http-equiv="Content-Type" content="text/html; charset=utf-8">'+
'\n<\/head>'+
'\n<body>'+
'\n<img alt="description" src="'+image+'">'+
'\n<\/body>'+
'\n<\/html>';

var win=window.open('', 'child', 'scrollbars,width=620,height=1244');
win.document.write(doc);
win.document.close();
return false;
}
</script>

</head>
<body>
See all our <a href="/skin1/images/labels/widget.jpg" onclick="return popup(this.href);">Widget Label Colors</a>
</body>
</html>
The window width/height will still be limited to users screen size.