Javascript to proportionally resize images in IE - searching for script errors

stuartw

11-11-2007, 07:21 PM

I am in the process of setting up an image gallery for the website at work, written in HTML, CSS with javascript used to show the full size image in a quasi-pop up window when a thumbnail is clicked.

The test gallery can be seen at www.sillytrouts.co.uk/test_gallery/page7.htm

The problem I am having is in resizing the images for the thumbnail page. In the html I have used max-width and max-height to set the longest side of each image to 200px. In FF this works perfectly, but of course in IE (6 or 7), the images do not resize but appear in their actual size.

After a great deal of online research, I have found two javascripts that might do the trick. These are saved on the web as imagesize1.js and imagesize.js. I have saved the scripts in separate files and tried to call them up in the <head> using <code><script src="imagesize.js"> type="text/javascript"></script></code>.

Sadly, neither of the scripts has any effect in IE (any version), so I was wondering (and hoping), please, if any of you could look at the scripts and say how I should change them to get them working.

The scripts as I have them are as follows:

Here is imagesize1.js:
<code>
var w = offsetWidth;
var h = offsetHeight;
if (w > 200) {h = h * 200 / w; w = 200;}
if (h > 200) {w = w * 200 / h; h = 200;}
{width = w + 'px';
height = h + 'px';}
</code>

and here is imagesize.js:
<code>
{for (i=1;i<document.images.length;i++)
{if (document.images[i].width > 200)
{document.images[i].width = 200;
}
}
}
</code>

I am sorry if the errors are rather elementary, but I am a newbie to javascript and have only succeeded thus far in implementing complete scripts on the website. You might say it has been a very steep learning curve since starting my job as a website administrator in May!

Thanks ever so much for any help you might be able to offer.

Cheers

Stuart W

Apostropartheid

11-11-2007, 07:26 PM

Setting a DOCTYPE will solve the problem in IE7. Add <!DOCTYPE html> to the beginning of your file.

Otherwise, this article (http://perishablepress.com/press/2007/01/16/maximum-and-minimum-height-and-width-in-internet-explorer/) has a nice way of solving it for IEn using dynamic expressions.

stuartw

11-11-2007, 07:35 PM

Hi CyanLight - thanks for the info.

It is a really silly question, but do you mean add the DOCTYPE to the page7.htm file or the javascript files?

Thanks

Stu

Inigoesdr

11-11-2007, 07:43 PM

JavaScript files don't use DOCTYPEs.

stuartw

11-11-2007, 07:44 PM

Thanks Inigoesdr, I think I knew that really - I am just unconfident!

Have added the DOCTYPE to the page and it is great in IE7, but no joy in IE6.

Does anyone have any other ideas please?

stuartw

11-11-2007, 09:11 PM

Thanks very much to everyone who suggested ideas to solve my image resizing.

In the end, I did it without using the javascript I was toying with, but using the IE proprietary CSS attribute, expression, in a nested if statement as follows:

<code>

expression(this.scrollWidth > this.scrollHeight? '200px' : 'auto'); height: expression(this.scrollHeight > this.scrollWidth ? '200px' : 'auto' );

</code>

Many thanks to CyanLight for the link to the article about using them.

Best wishes,

Stu