knightmazinga
05-31-2006, 04:28 AM
Hi!
i want to use the script in this page...
(http://javascript.internet.com/page-details/dynamic-sized-image.html)
...to open a image on a popup. The script will proportionally resize an image to fit within the current window. Just had to put onResize="history.go(0);" on the body tag of the popup to avoid manually reloadig it, and/or using F5.
here's my version of this dynamic-sized-image.html;
--------------------------------------------------------
<html>
<HEAD>
<title>dynamic-sized-image</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function showpic(src, w, h, alt, aln, pw, ph, bw, bh) {
if (src == null) return;
var iw, ih; // Set inner width and height
if (window.innerWidth == null) {
iw = document.body.clientWidth;
ih=document.body.clientHeight;
}
else {
iw = window.innerWidth;
ih = window.innerHeight;
}
if (w == null) w = iw;
if(h == null) h = ih;
if(alt == null) alt = "Picture";
if(aln == null) aln = "middle";
if(pw == null) pw = 100;
if(ph == null) ph = 100;
if(bw == null) bw = 0;
if(bh == null) bh = 0;
var sw = Math.round((iw - bw) * pw / 100);
var sh = Math.round((ih - bh) * ph / 100);
if ((w * sh) / (h * sw) < 1) sw = Math.round(w * sh / h);
else sh = Math.round(h * sw / w);
document.write('<img src="'+src+'" width="'+sw+'" height="'+sh+'" align="middle">');
}
// End -->
</script>
</HEAD>
<BODY onResize="history.go(0);" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<script language="javascript">
showpic("0001.JPG",480,640);
</script>
</body>
</html>
--------------------------------------------------------
Long ago, i found this image opener called image-opener.html i using to open any image. The link that calls it, sets the image W and H , and the popup W and H too. Like this:
<A HREF="javascript:void(0)" onClick="window.open('image-opener.html?0002.JPG&960&1280','','width=960,height=1280,toolbar=0,scrollbars=no,resizable=yes')">
Here's the code of the image-opener.html i'm using:
<html>
<HEAD>
<title>image-opener</title>
</head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function showpic(src, w, h, alt, aln, pw, ph, bw, bh) {
if (src == null) return;
var iw, ih; // Set inner width and height
if (window.innerWidth == null) {
iw = document.body.clientWidth;
ih=document.body.clientHeight;
}
else {
iw = window.innerWidth;
ih = window.innerHeight;
}
if (w == null) w = iw;
if(h == null) h = ih;
if(pw == null) pw = 100;
if(ph == null) ph = 100;
if(bw == null) bw = 0;
if(bh == null) bh = 0;
var sw = Math.round((iw - bw) * pw / 100);
var sh = Math.round((ih - bh) * ph / 100);
if ((w * sh) / (h * sw) < 1) sw = Math.round(w * sh / h);
else sh = Math.round(h * sw / w);
document.write('<img src="'+src+'" width="'+sw+'" height="'+sh+'" align="middle">');
}
// End -->
</script>
</HEAD>
<body topmargin=0 leftmargin=0 bgcolor=black rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<SCRIPT LANGUAGE="JavaScript">
<!--
this.window.focus();
querystring = this.location.search.substring(1,this.location.search.length);
pairs = new Array();
pairs = querystring.split('&');
var quote = '"';
document.write('<img src=' + '"' + pairs[0] + '"' + ' WIDTH=' + pairs[1] + ' HEIGHT=' + pairs[2] + ' ><BR>');
// -->
</SCRIPT>
</body></html>
The codes of the files are not so different, but i'm new to JS, and i want to know is, (if possible) what to change on the image-opener.html so i can use the feature of the dynamic-sized-image.html??
Here's a page with the working popups (http://www.mazingerzpr.net/jshelp/)
jshelp@mazingerzpr.net
Thanks!!!
i want to use the script in this page...
(http://javascript.internet.com/page-details/dynamic-sized-image.html)
...to open a image on a popup. The script will proportionally resize an image to fit within the current window. Just had to put onResize="history.go(0);" on the body tag of the popup to avoid manually reloadig it, and/or using F5.
here's my version of this dynamic-sized-image.html;
--------------------------------------------------------
<html>
<HEAD>
<title>dynamic-sized-image</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function showpic(src, w, h, alt, aln, pw, ph, bw, bh) {
if (src == null) return;
var iw, ih; // Set inner width and height
if (window.innerWidth == null) {
iw = document.body.clientWidth;
ih=document.body.clientHeight;
}
else {
iw = window.innerWidth;
ih = window.innerHeight;
}
if (w == null) w = iw;
if(h == null) h = ih;
if(alt == null) alt = "Picture";
if(aln == null) aln = "middle";
if(pw == null) pw = 100;
if(ph == null) ph = 100;
if(bw == null) bw = 0;
if(bh == null) bh = 0;
var sw = Math.round((iw - bw) * pw / 100);
var sh = Math.round((ih - bh) * ph / 100);
if ((w * sh) / (h * sw) < 1) sw = Math.round(w * sh / h);
else sh = Math.round(h * sw / w);
document.write('<img src="'+src+'" width="'+sw+'" height="'+sh+'" align="middle">');
}
// End -->
</script>
</HEAD>
<BODY onResize="history.go(0);" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<script language="javascript">
showpic("0001.JPG",480,640);
</script>
</body>
</html>
--------------------------------------------------------
Long ago, i found this image opener called image-opener.html i using to open any image. The link that calls it, sets the image W and H , and the popup W and H too. Like this:
<A HREF="javascript:void(0)" onClick="window.open('image-opener.html?0002.JPG&960&1280','','width=960,height=1280,toolbar=0,scrollbars=no,resizable=yes')">
Here's the code of the image-opener.html i'm using:
<html>
<HEAD>
<title>image-opener</title>
</head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function showpic(src, w, h, alt, aln, pw, ph, bw, bh) {
if (src == null) return;
var iw, ih; // Set inner width and height
if (window.innerWidth == null) {
iw = document.body.clientWidth;
ih=document.body.clientHeight;
}
else {
iw = window.innerWidth;
ih = window.innerHeight;
}
if (w == null) w = iw;
if(h == null) h = ih;
if(pw == null) pw = 100;
if(ph == null) ph = 100;
if(bw == null) bw = 0;
if(bh == null) bh = 0;
var sw = Math.round((iw - bw) * pw / 100);
var sh = Math.round((ih - bh) * ph / 100);
if ((w * sh) / (h * sw) < 1) sw = Math.round(w * sh / h);
else sh = Math.round(h * sw / w);
document.write('<img src="'+src+'" width="'+sw+'" height="'+sh+'" align="middle">');
}
// End -->
</script>
</HEAD>
<body topmargin=0 leftmargin=0 bgcolor=black rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<SCRIPT LANGUAGE="JavaScript">
<!--
this.window.focus();
querystring = this.location.search.substring(1,this.location.search.length);
pairs = new Array();
pairs = querystring.split('&');
var quote = '"';
document.write('<img src=' + '"' + pairs[0] + '"' + ' WIDTH=' + pairs[1] + ' HEIGHT=' + pairs[2] + ' ><BR>');
// -->
</SCRIPT>
</body></html>
The codes of the files are not so different, but i'm new to JS, and i want to know is, (if possible) what to change on the image-opener.html so i can use the feature of the dynamic-sized-image.html??
Here's a page with the working popups (http://www.mazingerzpr.net/jshelp/)
jshelp@mazingerzpr.net
Thanks!!!