...

View Full Version : Automatically resize pop-up window to fit jpg



Mark Oliver
12-28-2005, 08:15 PM
Hello,

I would like to create a pop-up window that will automatically resize the window to match the size of the jpg.

For example if the jpg is 500x400 pixels then when you click on the link the pop-up windows will be just the size to fit it neatly.

I would like this with only javascript (no cgi) and as simple as possible. Also if it could work on older browsers that would be great.

Is this possible and thanks for your help.

konithomimo
12-28-2005, 08:31 PM
To resize a window use:

window.self.resizeTo

So, try something like this (this code is untested)

function calc()
{
//find the height of the internal page
var the_height=document.scrollHeight;
var the_width=document.scrollWidth;
window.self.resizeTo(the_width,the_height);
}

Ancora
12-28-2005, 08:39 PM
Mark:

This code has been tested, but please, test it AS IS. Don't try to cut and paste portions of it in to another document prior to getting this COMPLETE document working.

It automatically displays a centered pop-up, the exact size of the subject image, when the user clicks "thumbnail" image.

Pay attention to the image path, if any.


<HTML>
<Head>
<Script type="text/javascript">

var largerView = "";
var winToggle = false;

function openFullSize(Pix,isDesc){

if (winToggle){largerView.close()}
document.getElementById('nullIMG').src = Pix;
var wStr = document.getElementById('nullIMG').width;
var offsetW = wStr;
wStr = wStr+20;
wStr = "width="+wStr;
var hStr = document.getElementById('nullIMG').height;
var offsetH = hStr;
hStr = hStr+20;
hStr = "height="+hStr;
var lStr = (screen.width-50-offsetW)/2;
lStr = "left="+lStr;
var tStr = (screen.availHeight-50-offsetH)/2;
tStr = "top="+tStr;
largerView = window.open(Pix,"FullSize","toolbar=0,status=0,"+tStr+","+lStr+","+wStr+","+hStr+"");
largerView.document.title = isDesc;
winToggle = true;
}

function buildSupport(){

var styleStr = "<style>.thumb{cursor:pointer;border:solid blue 2px}</style>"
var divStr = "<Div style='Position:Absolute;Top:-2000'><IMG ID='nullIMG'>&nbsp</Div>"
document.write(divStr);
document.write(styleStr);
}

buildSupport();

window.onunload=function(){

if (winToggle && !largerView.closed){largerView.close()}
}
</Script>
</Head>
<Body>
<Img Src='1/Any.jpg' width='120' height='90' class='thumb' onclick="openFullSize(this.src,'This is a description')" alt='Click to enlarge'>
<Img Src='1/Some.jpg' width='120' height='90' class='thumb' onclick="openFullSize(this.src,'This is another description')" alt='Click to enlarge'>
<!-- The following line must be the LAST line in the Body -->
<Script> document.getElementById('nullIMG').src = document.images[1].src </Script>
</Body>
</HTML>

Mark Oliver
12-28-2005, 08:58 PM
Wow thanks Ancora,

Actually I need a link to make the image pop-up not a thumbnail.

Is there an easy way to get all this into an existing website?

Ancora
12-28-2005, 09:59 PM
Mark:

This is the only way I could get it to reliably work with "links," in FF an IE6.

Again, test it AS IS. It's a completely different document.

You know, incorporating it "easily" in to your existing code is your responsibility.

I wouldn't have responded if not for your prior courtesy, but I know that you didn't come here expecting to rely upon others to complete your project.


<HTML>
<Head>
<Script type="text/javascript">

var largerView = "";
var winToggle = false;

function openFullSize(Pix){

if (winToggle){largerView.close()}
document.getElementById('nullIMG').src = Pix;
var wStr = document.getElementById('nullIMG').width;
var offsetW = wStr;
wStr = wStr+20;
wStr = "width="+wStr;
var hStr = document.getElementById('nullIMG').height;
var offsetH = hStr;
hStr = hStr+20;
hStr = "height="+hStr;
var lStr = (screen.width-50-offsetW)/2;
lStr = "left="+lStr;
var tStr = (screen.availHeight-50-offsetH)/2;
tStr = "top="+tStr;
largerView =

window.open(Pix,"FullSize","toolbar=0,status=0,"+tStr+","+lStr+","+wStr+","+hStr+"");
winToggle = true;
}

function buildSupport(){

var styleStr =

"<style>.thumb{display:none}.mimic{color:blue;cursor:pointer}</style>"
var divStr = "<Div style='Position:Absolute;Top:-2000'><IMG

ID='nullIMG'>&nbsp</Div>"
document.write(divStr);
document.write(styleStr);
}

buildSupport();

window.onunload=function(){

if (winToggle && !largerView.closed){largerView.close()}
}
</Script>
</Head>
<Body>
<Img Src='1/Any.jpg' class='thumb' id='img1'>
<span class='mimic' onclick="openFullSize(document.getElementById('img1').src)"> Any </span>
<br>
<Img Src='1/Some.jpg' class='thumb' id='img2'>
<span class='mimic' onclick="openFullSize(document.getElementById('img2').src)"> Some </span>

<!-- The following line must be the LAST line in the Body -->
<Script type="text/javascript"> document.getElementById('nullIMG').src = document.images[1].src </Script>
</Body>
</HTML>

Mark Oliver
12-28-2005, 10:05 PM
Mark:

This is the only way I could get it to reliably work with "links," in FF an IE6.

Again, test it AS IS. It's a completely different document.

You know, incorporating it "easily" in to your existing code is your responsibility.

I wouldn't have responded if not for your prior courtesy, but I know that you didn't come here expecting to rely upon others to complete your project.


Thanks again. I wasn't asking anyone to do the work for me but I am not an advanced user and appreciate any help. I was confused by your "As is" comment thinking it wouldn't work (or wasn't allowed) to use it if I chopped it up.

Ancora
12-28-2005, 10:35 PM
Mark:

No, it's just that many times, I post working code, a complete document, and then the author of the thread responds: "That don't work at all, can someone else help me?" It's because he or she either fails or refuses to test the complete document, AS IS, before moving along.

Chop it up, just get it to work first AS IS.

And, forgive me, but the last line of code in the document should contain a [1] and not [0], for the .src.

I've changed it in my post, be sure to correct it in your code.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum