Automatic image resize to fit frame

@JobquestFeb 24.2006

Hi there – can anyone help before I flip! I have four small images in a table on one side of a two frame page. When I click on the images they appear in the second frame which is fine BUT I want the new large picture to automatically resize to fit the frame. The original pics are 1728 x 2304 pixels but I want them to automatically reduce to 400 x 600 pixels. I can’t work out what javascript will enable this or where to put the javascript on the page – can anyone help – I am desperate, been trying to work this out for 3 days!!!!

to post a comment

JavaScript

22 Comments(s) _↴

@phpnoviceFeb 25.2006 — #var img = document.images["myImageName"];

img.style.width = 600 + "px";

img.style.height = 400 + "px";

@JobquestauthorFeb 25.2006 — #Hi there - thanks for your reply. I really appreciate this. Can you tell me where I put this code? Does it go in the gallery frame or target frame?

Many thanks!!!

@phpnoviceFeb 25.2006 — #What code do you use to send the image to the other frame?

@JobquestauthorFeb 25.2006 — #Hi - I created a hyperlink on the small image (on left hand "contents" frame) and then for the target frame I set it for the right hand side.

@phpnoviceFeb 25.2006 — #OK, show that hyperlink.

@JobquestauthorFeb 25.2006 — #This is the code I have just copied and pasted for a couple of the pictures - does this help?

<tr>

<td width="75" style="border-style: none; border-width: medium"> </td>

<td width="45" style="border-style: none; border-width: medium">

<p align="center">

<a target="main" href="Absolutely%20Fabulous/CIMG2626.JPG">

<img border="0" src="Absolutely%20Fabulous/CIMG2626.JPG" width="75" height="100"></a></td>

<td width="45" style="border-style: none; border-width: medium"> </td>

<td width="44" style="border-style: none; border-width: medium">

<p align="center">

<img border="0" src="Absolutely%20Fabulous/CIMG2627.JPG" width="75" height="100"></td>

<td width="27" style="border-style: none; border-width: medium"> </td>

</tr>

Many thanks again - you might just be saving my life here!!! Raymond

@phpnoviceFeb 25.2006 — #OK, this is the hyperlink:

[code=html]
 <a target="main" href="Absolutely%20Fabulous/CIMG2626.JPG">
 <img border="0" src="Absolutely%20Fabulous/CIMG2626.JPG" width="75" height="100"></a>
 [/code]

The easiet way to make this work, is to create a generic page to load into the main frame -- then, pass the image information desired to that page. For example:

[code=html]
 <a target="main" href="imageViewer?src=Absolutely%20Fabulous/CIMG2626.JPG">
 <img border="0" src="Absolutely%20Fabulous/CIMG2626.JPG" width="75" height="100"></a>
 [/code]

In that generic page, you can extract this information and insert it into a generic IMG tag within that generic web page:

<i>
 </i>window.onload = function() {
 var src = self.location.search.substr(5);
 if (src.length &gt; 0) {
 document.images["myImageName"].src = unescape(src);
 }
 return true;
 }

@JobquestauthorFeb 25.2006 — #Okay - I'm just trying to work this out!

I have 3 pages in total:

Page 1 is what I call the Gallery - this is where I have all the small images (this was where I have the code that I pasted for you to look at)

Page 2 is what I call the Target - this is where I want the larger image to appear but sized to fit the dimensions I set

Page 3 is a frames page which I call the Profile and it consists of the left frame being Page 1 and the right frame being Page 2

Does this give you more info? - I'm going to have a go using the scripts you have just given me just now but am watching out for your reply - You can't begin to imagine how much of a help you are being to me. I am self taught and realising I might have bitten off more than I can chew!

@phpnoviceFeb 25.2006 — #I am self-taught, too. ? But, that was over six years ago. At any rate... THe three documents you describe are much what I had in mind. Thus, the hyperlink would be as follows:

<i>
 </i>&lt;a target="main" href="[COLOR=Red]Target.html[/COLOR]?src=Absolutely%20Fabulous/CIMG2626.JPG"&gt;
 &lt;img border="0" src="Absolutely%20Fabulous/CIMG2626.JPG" width="75" height="100"&gt;&lt;/a&gt;

Then, the JavaScript I gave you would go in the Target.html page.

@JobquestauthorFeb 25.2006 — #Okay so this last javascript you gave me - is this the only one I need?

If I assume that it is then where does it go into the target page?

? Does it go at the <head> or the <body> or somewhere else?

@phpnoviceFeb 25.2006 — #The last post was not JavaScript. That was the HTML that would go in the Gallery page. The JavaScript was in my post before that. That goes in the HEAD section of the Target page.

@JobquestauthorFeb 25.2006 — #Hi there - I'm not sure if this has worked or not.

I copied -

<a target="main" href="Target.html?src=Absolutely%20Fabulous/CIMG2626.JPG">

<img border="0" src="Absolutely%20Fabulous/CIMG2626.JPG" width="75" height="100"></a>

into page 1 (Gallery page) replacing the original hyperlink.

I then copied -

window.onload = function() {

var src = self.location.search.substr(5);

if (src.length > 0) {

document.images["myImageName"].src = unescape(src);

}

return true;

}

into page 2 (Target page) but I might have done it wrong because I placed it in the <body> section and then enclosed it between <Script Language="Javascript"> and </script> so that it turned red which I think is right as it is a javascript...?

Then I opened the Profile page (Page 3 with the 2 frames) in my browser and for the first time ever I did not get the gigantic image open up when I clicked on the small image - no image appeared BUT I did get a message at the bottom which said "Done but with errors on page" Has this happened because I am not yet published with my website...?

I do hope you can make sense of all this!!!

Raymond

@phpnoviceFeb 25.2006 — #The final thing is that this line must reference the IMG tag in your Target page:

document.images["[COLOR=Red]myImageName[/COLOR]"].src = unescape(src);

And... Don't forget the JavaScript I gave you in the very beginning. If your IMG tag is coded with the correct width and height then, good. If not, you'll need that JavaScript I gave you at first.

@JobquestauthorFeb 25.2006 — #Oh!

Instead of ["myImageName"] on page 2 (Target page) I replaced it with -

["A/Absolutely%20Fabulous/CIMG2626.JPG"]

@JobquestauthorFeb 25.2006 — #Help! I'd forgotten about the original javascript you gave me - where does that go - which page? beside what?

@phpnoviceFeb 25.2006 — #Goes in the Target page inside of the onload function I gave you.

@JobquestauthorFeb 25.2006 — #AHH!!!

Right - I'm doing it now! I had put it with the hyperlink in the Gallery page - oops!

Give me a sec!

@JobquestauthorFeb 25.2006 — #I'm sorry, I don't know your name but I am calling you my Saviour!

This is what I have in the head section of my Target page -

<head>

<Script Language="Javascript">

window.onload = function() {

var src = self.location.search.substr(5);

if (src.length > 0) {

document.images["A/Absolutely%20Fabulous/CIMG2626.JPG"].src = unescape(src);

}

return true;

}

var img = document.images["A/Absolutely%20Fabulous/CIMG2626.JPG"]; img.style.width = 600 +

"px"; img.style.height = 400 + "px";

</script>

</head>

Is this right?

@phpnoviceFeb 25.2006 — #Notice the relationship between the red part of this code:

<i>
 </i>window.onload = function() {
 var src = self.location.search.substr(5);
 if (src.length &gt; 0) {
 var img = document.images["[COLOR=Red]myImageName[/COLOR]"];
 img.src = unescape(src);
 img.style.width = 600 + "px";
 img.style.height = 400 + "px";
 }
 return true;
 }

and the red part of this code:

<i>
 </i>&lt;img name="[COLOR=Red]myImageName[/COLOR]" ...etc...&gt;

@JobquestauthorFeb 25.2006 — #Hi again!

It's starting to make sense!

I think it's working BUT the image does not open up in my browser when I click in the small image - instead I get the message Done, but with errors on page and there is a little yellow triangle infront of this wording.

I am now checking everything with a toothcomb but wonder if it is because theis website is not "live" yet as I have yet to publish it... ?

@phpnoviceFeb 25.2006 — #Well, publish it and then give me a link to check out if you're still getting errors.

@JobquestauthorFeb 25.2006 — #Hi! I have rectified a couple of things and the "Done, but with errors on page" has gone! It now has the little blue explorer symbol - so I think it's working. The picture does not open up :mad: but I suspect this is the same issue I get with my pop up windows which are also blank and it's because I'm not published yet.

I've yet to determine who the best webhost will be and that's what my project is for next week to find a suitable one to publish the site to.

My site is almost 1 GB in size so it's going to be a bit of a costly exercise but as this is a business I'm launching then it'sll be wirth the money.

What is your e-mail address? Mine is [email][email protected][/email] if you give me yours I'll let you know when I am up and running but I am convinced that you have saved the day for me - I am so grateful to you!!! ? ? ?

Also in #JavaScript _↴

Problem with my Black Jack Game Code dropdown boxes Bad impleneted error on oncontextmenu

Success!

Help @Jobquest spread the word by sharing this article on Twitter...

Tweet This

Automatic image resize to fit frame

22 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Automatic image resize to fit frame

22 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

22 Comments(s) _↴

Also in #JavaScript _↴