Multiple function instances causing conflicts

[dax]

Hello,

I'm new at Javascript so please bear with me.

I have a page loading multiple images and then a script to resize the
images to all the same scale. I believe that the function to resize
the images is causing conflicts because I'm only using a simple global
variable, and I need to create an object for each image instead. But
I'm not sure how to do this.

The problem is only one or two of the images are loading, while the
others aren't displayed at all.

Heres the script

<script language="javascript">
function ScaleImage(ImageId, Size) {

IMG=document.getElementById(ImageId);

w=IMG.width;
h=IMG.height;

if (h > w)
{
if (h > Size)
{
f = h / Size;
IMG.width=w / f;
IMG.height=h / f;
}
else
{
IMG.width=w;
IMG.height=h;
}
}
else if (w >= h)
{

if (w > Size)
{
f = w / Size;
IMG.width=w / f;
IMG.height=h / f;
}
else
{
IMG.width=w;
IMG.height=h;
}
}

}
</script>

Then the images are loaded from a db query.

<img src="image1.gif" id="image1" onload="ScaleImage('image1','150')">
<img src="image2.gif" id="image2" onload="ScaleImage('image2','150')">
<img src="image3.gif" id="image3" onload="ScaleImage('image3','150')">
<img src="image4.gif" id="image4" onload="ScaleImage('image4','150')">
etc.....


I can't create an array because the numbering isn't always going to be
consecutive like I have in my example.

Any help would really be appreciated.

Thanks

 

[RobG]

Hello,

I'm new at Javascript so please bear with me.

I have a page loading multiple images and then a script to resize the
images to all the same scale.  I believe that the function to resize
the images is causing conflicts because I'm only using a simple global
variable, and I need to create an object for each image instead.  But
I'm not sure how to do this.

You are creating a bunch of global variables, probably
unintentionally. You don't need an object for each image, you just
need to keep the function's variables local - see below.

The problem is only one or two of the images are loading, while the
others aren't displayed at all.

Heres the script

<script language="javascript">

The language attribute is deprecated, type is required, use:

function ScaleImage(ImageId, Size) {

It is a convention that function names starting with a capital letter
are reserved for constructors. Similarly, local variables should start
with lower case letters too:

function scaleImage(imageId, size) {

   IMG=document.getElementById(ImageId);

If you don't declare local variables, they are created as global
variables when the function is called. Use:

var img = document.getElementById(imageId);

    w=IMG.width;
    h=IMG.height;

Same here:

var w = img.width;
var h = img.height;

        if (h > w)
        {
        if (h > Size)
                {
        f = h / Size;

And here too:

var f = h / size;

[...]

HTH

 

[Doug Gunnoe]

Hello,

I'm new at Javascript so please bear with me.

I have a page loading multiple images and then a script to resize the
images to all the same scale.  I believe that the function to resize
the images is causing conflicts because I'm only using a simple global
variable, and I need to create an object for each image instead.  But
I'm not sure how to do this.

Thanks

dax,

I tried your function to resize the images and it seems to work fine
for me. Although all the images I used were local and all the same
size.

As far as creating an object for each image, every time your function
does this

IMG=document.getElementById(ImageId);

It creates an object reference to that particular image element.

Is it showing broken images where the other images are suppose to be,
or does the browser just stop loading the page, do you get any kind of
errors?

Doug

 

[Doug Gunnoe]

As far as creating an object for each image, every time your function
does this

IMG=document.getElementById(ImageId);

It creates an object reference to that particular image element.

And I suppose as RobG points out concerning the local and global scope
here, that this actually creates an object ref the first time it runs
and then just reassigns it every other time it runs.

 

[dax]

Thanks for the syntax corrections RobG.

I cleaned up the script but still having the same problem.



To answer your questions Doug.

Some images just don't appear, there isn't a broken link, there is
just no image displayed at all.
The problem is specific to IE as well, it works great in NN and
Firefox.
The images are local as well, for now, and are all different sizes.


Thanks

Dax

 

[dax]

I added an "alert("Image Loaded");" to the bottom of the script.

I got 4 alerts but only 3 images where displayed.

Thanks again

dax

 

[RobG]

Thanks for the syntax corrections RobG.

I cleaned up the script but still having the same problem.

Then you need to show the new function. Is this the only thing in the
page? The following works fine in Safari and Firefox, it is somewhat
different to your original as there was a lot of redundancy, e.g. you
work out the scale factor and apply it once and the original 'else'
statements did nothing - they just set the width to the width and
heigh to the height. Note also that the images pass a reference to
themselves using 'this', so no need for getElementById or image ids.
It also makes sure the width and height are integers:

<script type="text/javascript">

function scaleImage(img, size) {
var w = img.width;
var h = img.height;
var f = 1; // f is scale factor

if (h > w) {
if (h > size) {
f = h / size;
}
} else if (w >= h) {
if (w > size) {
f = w / size;
}
}

// Make sure width and height are integers
img.width = (w / f)|0;
img.height = (h / f)|0;
}
</script>
<div>
<img src="image1.jpg" onload="scaleImage(this,'10')">
<img src="image2.jpg" onload="scaleImage(this,'10')">
<img src="image3.jpg" onload="scaleImage(this,'10')">
<img src="image4.jpg" onload="scaleImage(this,'10')">
</div>

 

[Anthony Levensalor]

dax posted :

I added an "alert("Image Loaded");" to the bottom of the script.

I got 4 alerts but only 3 images where displayed.

This happened to me once, and it turned out that when I opened the image
and re-saved it in an image editor, it displayed fine. It must have been
corruptedt or some such. You may want to give that a shot.

~A!

--
Anthony Levensalor
(e-mail address removed)

Only two things are infinite, the universe and human stupidity,
and I'm not sure about the former. - Albert Einstein