Lightbox: Resizing Loading Image in IE? [FIXED]

[abcdefGARY]

1) Script Title:
Lightbox Image Viewer v2.0
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...box2/index.htm
3) Describe problem:
I created a loading.gif (which is 100px in width and 32px in height) but the problem is... it will only display in the dimensions of the original loading.gif in Internet Explorer.

I tried to change the lightbox.js file:

		//				<div id="loading" width="100px" height="32px" style="width:100px;height:32px;">
		//					<a href="#" id="loadingLink" width="100px">
		//						<img src="images/loading.gif" width="100px" height="32px" style="width:100px;height:32px;">

still no luck.
if anyone has a solution, it would be helpful.

edit: fixed

[jscheuer1]

// <div id="loading" width="100px" height="32px" style="width:100px;height:32px;">
// <a href="#" id="loadingLink" width="100px">
// <img src="images/loading.gif" width="100px" height="32px" style="width:100px;height:32px;">

Mmm, in javascript any line that begins with // is a comment. Width and height attributes should specify percentage or no units (pixels then being assumed). You don't need dimension attributes as well as dimension style properties. One or the other is fine. The containing element (in this case the div and the a tags are both containers) have no influence over the dimensions of any images that they contain. Most likely though, since what you have here is only a comment, the real code that determines the dimensions for the loading image is elsewhere.

[jscheuer1]

I've searched through the code and cannot find where it says that the image should be those dimensions in IE but, after some tests, it obviously is saying that somewhere. You should be able to override that though with an entry like so in lightbox.css:

#loadingLink img {
width:100px!important;
height:32px!important;
}

[bball2]

also, put as much specificity as you can, ie) html body #wrapper #main #content #loadingLink img {...}

[jscheuer1]

I just figured it out, you must have added your new 'loading image' in the wrong place, how did you add it? It is supposed to go here:

// -----------------------------------------------------------------------------------

//
//	Configuration
//
var fileLoadingImage = "images/loading.gif";		
var fileBottomNavCloseImage = "images/closelabel.gif";

var resizeSpeed = 7;	// controls the speed of the image resizing (1=slowest and 10=fastest)

var borderSize = 10;	//if you adjust the padding in the CSS, you will need to update this variable

// -----------------------------------------------------------------------------------

near the top of lightbox.js

If you put the correct path and filename to your image there, that should take care of it without my earlier suggestion being required.

[abcdefGARY]

I've searched through the code and cannot find where it says that the image should be those dimensions in IE but, after some tests, it obviously is saying that somewhere. You should be able to override that though with an entry like so in lightbox.css:

#loadingLink img {
width:100px!important;
height:32px!important;
}

thank you. this works extremely well.

[jscheuer1]

If the image is entered in the correct place to begin with, the style rules are not required.

When IE creates an image element with a src attribute via the setAttribute method and that image is available, it automatically sets the width and height attributes of that image element to the width and height of the source image. This is exactly how this script works when creating the tag for the loading image.

So, as I say, if the path and filename for the loading image are entered where the script expects them to be, everything will work out fine.

[abcdefGARY]

no, the image path was correct. it displayed correctly in firefox... just not in ie for some reason.

[jscheuer1]

no, the image path was correct. it displayed correctly in firefox... just not in ie for some reason.

Well, for an image to display at all, the path and filename must be correct. I was merely questioning how you arranged for that particular image path and filename to be the loading image. If you put it in the spot documented for it in the lightbox.js file, in its configuration area, there should have been no problem with the size in the first place in any browser. If you did do that and the problem in IE persisted, then you either needed to clear your cache, or it is a bug in the script.