<img width=""> dinamically set 1

[sandravega]

Hi,
This is my goal: I'm programming a dinamic site wich allows the administrator to load some images and then display them in the front-end site, something like a catalog.
The front end is mainly a table wich shows the images and the text that the administrator saved in a Data Base, and I have 2 pages: one that displays all the images in a little size and an abstract of the texts and the other with the hole image at full size and the complete text.

But, the administrator can load 60 x 60 images to 300 x 300 images.
When I display them in the "all" page, I want them in 94 x 94 size "unless" the image is smaller, then I want it to be showed in its proper size
(example: an image of 200 x 200 should be showed in 94 x 94, an image of 65 x 65 should be showed in 65 x 65 size)

Here´s the code:
(idsN() is an array where I previously recovered the ids of every image and imagenesN() is an array with the correspondingly paths)

foto<%=IdsN(i)%>=new Image();
foto<%=IdsN(i)%>.src="<%=imagenesN(i)%>";
oksize=foto<%=IdsN(i)%>.width;
if (foto<%=IdsN(i)%>.width>94) {
 imagen="<img src='"+"<%=imagenesN(i)%>"+"' name='"+"foto<%=IdsN(i)%>"+"' border='0' width='94'>";
}else{
 imagen="<img src='"+"<%=imagenesN(i)%>"+"' name='"+"foto<%=IdsN(i)%>"+"' border='0' width='" + oksize+ "'>";
document.write(imagen);

I also put a document.open() and document.close() statement before and after the for... next loop that goes over the array

But the images show as a single point, and I must refresh manually the page to see them in their right size

I'm not sure I'm using the right approach, maybe document.write is not a good idea for the current document... Maybe I just have to use the "onComplete" body event to resize the images...

Thanks you a lot

Sandra Vega

 

[BabyJeffy]

Why on earth are you mixing server-side and client-side clode like that? Why not just output the contents of the database using server side code?

Make it even easier on yourself... and have the server-side code that manages the loading of the images also automatically calculate the width/heights and update various fields in your database automatically.

Depending on the server-side code you are using... you could even have the database return the correct width/height based on stored procedures (MS SQL and mySQL v5+ I think).

I think your whole problem is being caused by this document.write process. Just build things up server-side and output them directly to the page. It'll also have the added side effect of providing access for non-Javascript clients (if you care about such things).

Jeff

 

[sandravega]

Baby Jeffy:
Well, I'm using server side and client side code just because I cant't figure out best ways of doing what I want. Actually, the images are not "in" the database, but they're stored with a name based in the database: <id>.jpg, or <id>.gif in some special directory just intended for the images. That's a fact of the implementation I can´t change...
If you say asp is capable of searching the size of a given image, I'll try it to size the output.
Thanks

Sandra

 

[adam0101]

If you're serious about your website, you should get some thumbnail generating software and create separate thumbnail images to decrease load time. There are plenty if you search on Google. If you still want a JavaScript solution, try these:

This will resize the image to 94x94 if either the width or height is greater than 94.

<img src="<%=imagenesN(i)%>" onload="if(width>94||height>94){height=94;width=94}">

If you want to keep the image in proportion, this will resize either the height or width (whichever is greater) to 94, and resize the other axis to the proportionate size.

<img src="<%=imagenesN(i)%>" onload="if(width>94||height>94){if(height>width){height=94}else{width=94}}">

Adam
while(ignorance){perpetuate(violence,fear,hatred);life=life-1};

 

[sandravega]

Adam0101,
this is not the first time you give me a solution. Thank you very much. I know about the loss of loading performance in this way of showing images, but the full-size image will be used in other part of the site too, and I wondered if saving a thumbnail was profitable (I mean, if it wasn´t a waste of storage space). I'll take your advice to do so, but I'll solve my deadline today
Thank you again.

Sandra