PDA

View Full Version : creating a new popup window that sizes to and image size

rsstewart
10-15-2002, 04:10 PM
I have a website that has alot of pages with photo thumbnails. all the pictures are different sizes, when you click a photo, it opens a new window with a full size photo. How can I have the size of that new window match the size of the image it is displaying? here is my code so far:

<SCRIPT TYPE="text/javascript">
<!--
var x = null;
function popup(mylink, windowname)
{
var href;
href=mylink.href;
x = window.open(href, windowname, 'width=520,height=420,scrollbars=no');
x.focus();
return false;
}
//-->
</SCRIPT>

....................................

<a onClick="return popup(this, 'picture')" href="images/tour/small6.jpg">
<img border="0" src="images/tour/large6.jpg" align="right" hspace="0" width="13" height="172"></a>
japangreg
10-15-2002, 04:36 PM
Hey, RSStewart.

I'm not a JS expert, but here goes:

What I would do (and that doesn't say much :)) is add another parameter to your function and pass the height and width of the window that way. So the code would look something like this:

function popup(mylink, windowname, dimesions){
x = window.open(href, windowname, dimensions);
x.focus();
return false;
}

<a href="#" onClick="popup('images\/tour\/small6.jpg','small6','width=520,height=420,scrollbars=no')"><img ...></a>

hth
japangreg
adios
10-15-2002, 05:30 PM
Here's something I wrote sometime:


<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">

var HTML, Gwin = null, pic = new Array();
var path = 'http://www.salon.com/news/feature/2002/'; //images directory

/* URLS below, as shown */

pic[0] = {
src: '07/23/granta/cover.jpg',
obj: null,
width: null,
height: null,
title: 'Sammy',
loaded: false
}
pic[1] = {
src: '09/06/asadabad/cover.jpg',
obj: null,
width: null,
height: null,
title: 'Gulbuddin Hekmatyar',
loaded: false
}
pic[2] = {
src: '09/05/perle/story.jpg',
obj: null,
width: null,
height: null,
title: 'Dicky',
loaded: false
}

//preloader
for (var i=0; i<pic.length; ++i) {
pic[i].obj = new Image();
pic[i].obj.onload = new Function(
'pic['+i+'].width=this.width;' +
'pic['+i+'].height=this.height;' +
'pic['+i+'].loaded=true;'
);
pic[i].obj.src = path + pic[i].src;
}

function graphwin(picObj) {
if (Gwin && !Gwin.closed) Gwin.close();
if (!arguments.length) return;
if (picObj.loaded) {
HTML = '';
HTML += '<html><head><title>'+picObj.title+'</title><script type="text/javascript">';
HTML += 'onblur=function(){setTimeout("self.focus()",1000)};';
HTML += 'onload=function(){self.focus()};';
HTML += '<\/script><style type="text/css">';
HTML += 'a.c{font:200 10px arial;color:white;text-decoration:none;}';
HTML += 'a:hover{color:#ffff00;background:#0000aa;}</style></head>';
HTML += '<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" bgcolor="steelblue">';
HTML += '<img border="0" width="'+picObj.width+'" height="'+picObj.height+'" ';
HTML += 'src="'+ path + picObj.src+'">';
HTML += '<table width="100%" cellspacing="0" cellpadding="0" border="1"><tr>';
HTML += '<td align="center" bgcolor="steelblue">';
HTML += '<a class="c" href="javascript:self.close()">close</a>';
HTML += '</td></tr></table></body></html>';
Gleft = screen.availWidth/2 - picObj.width/2;
Gtop = screen.availHeight/2 - picObj.height/2;
var attr = 'width='+picObj.width+',height='+(picObj.height+16);
attr += ',left='+Gleft+',top='+Gtop+',status=0';
Gwin = window.open('javascript:opener.HTML','Gwin',attr);
}
}

</script>
<style type="text/css">

body, a {
font: 200 16px monospace;
color: orange;
text-decoration: none;
background: olive;
}

</style>
</head>
<body>
<a href="javascript:void graphwin(pic[0])">&amp;#149;Sam&amp;#149;</a><br><br>
<a href="javascript:void graphwin(pic[1])">&amp;#149;Gul&amp;#149;</a><br><br>
<a href="javascript:void graphwin(pic[2])">&amp;#149;Dick&amp;#149;</a><br><br><br>
<a href="javascript:void graphwin()">&amp;#149;&amp;#149;close window&amp;#149;&amp;#149;</a>
</body>
</html>


It automatically gets the image size on preload.
rsstewart
10-15-2002, 07:11 PM
I have over 1000 thumbnails, so I can't specify each picture's size, I think I will need it to get the size from the pitcure it is about to put in a new window. I'm not doing a "pre load" i don't think, do I need to?
rsstewart
10-16-2002, 05:50 PM
In the way I'm doing it now:
x = window.open(href........
is there a way to gather properties on 'href' (the taget image) such as height or width? then couldn't i just set the height and width as variables?