Log in

View Full Version : customizing window attributes targeted from a link


ikon
07-25-2007, 11:39 PM
i am wanting to change the attributes of a window that opens to display an image when the thumbnail is clicked to enlarge it. as of now, it just opens in a whole new browser but i'd like it to open in a new window that is the size of the enlarged image, without all of the toolbars as well.

i have read some tutorials on this using javascript but cant quite get it. is there no code that can be added to the <a href..> tag of the linked image to create such a custom window?

thanks for all the help!
jscheuer1
07-26-2007, 04:13 AM
This approach is fraught with problems. The browser will limit what you can do. Opera's default settings will not even allow this. Other browsers will not allow a totally chrome-less window and if their settings are at all more restrictive than their defaults, may not allow the pop up. I'd suggest something like lightbox, but this will do what you ask about as best as can be expected:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Image Opener - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

function open_image(im){
if(!document.images)
return true;
if(open_image.nwin&&open_image.nwin.open)
open_image.nwin.close();
var nim=new Image(),l=screen.availWidth||0, t=screen.availHeight||0;
nim.onload=function(){
open_image.nwin=window.open('','','width='+nim.width+',height='+nim.height+(l? ',top='+[t/2-nim.height/2]+',left='+[l/2-nim.width/2] : ''));
open_image.nwin.document.write('<body style="margin:0;padding:0;"><img src="'+nim.src+'">');
open_image.nwin.document.close();
}
nim.src=im;
return false;
}
onunload=function(){
if(open_image.nwin&&open_image.nwin.open)
open_image.nwin.close();
}

</script>
</head>
<body>
<h2>Images In this Demo &copy; 2007 loisimages.com</h2>
<a href="http://loisimages.com/Eyes_Trees&#37;20in%20smoke1_400_optimized.jpg" onclick="return open_image(this.href);">Eye</a><br>
<a href="http://loisimages.com/blue_elephant3_400_optimized.jpg" onclick="return open_image(this.href);">Elephant</a><br>
<a href="http://loisimages.com/dog_tongue_out_400_optimized.jpg" onclick="return open_image(this.href);">Tongue</a><br>
</body>
</html>
jscheuer1
07-26-2007, 12:26 PM
After further experimentation (I had thought at the time that my above method seemed too good to be true), I discovered that I had my pop up blocker settings lowered in two key browsers. This allowed the above otherwise elegant script to work fairly well in FF and IE 7. However, these two browsers and IE 6 will block the action of the pop up. So, to give you a more workable in the real world solution, I would refer you to this tried and true method:

http://www.dynamicdrive.com/dynamicindex8/popwin.htm

I still think one of the 'box' type scripts would be better.
jscheuer1
07-26-2007, 01:28 PM
Rarely willing to give up all that easily, even though it is likely to have problems in some browsers and in any browser with large images and a small screen. I came up with this method that isn't too horrible:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Image Opener - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

function open_image(im){
if(!document.images)
return true;
if(open_image.nwin&&open_image.nwin.open)
open_image.nwin.close();
var l=screen.availWidth||0, t=screen.availHeight||0;
open_image.nwin=window.open('','','resizable, width=300, height=300'+(l? ',top='+[t/2-150]+',left='+[l/2-150] : ''));
open_image.nwin.document.write('<title>'+unescape(im.replace(/.*\/([^/]*)/,'$1'))+'<\/title>\n'+
'<script type="text/javascript">\n'+
'onload=function(){\n'+
'window.resizeTo(300,300);\n'+
'var nim=new Image(),l=screen.availWidth||0, t=screen.availHeight||0;\n'+
'var dw=window.innerWidth? 300-window.innerWidth : 300-document.body.clientWidth;\n'+
'var dh=window.innerHeight? 300-window.innerHeight : 300-document.body.clientHeight;\n'+
'nim.onload=function(){\n'+
'window.resizeTo(nim.width+dw, nim.height+dh);\n'+
'if(l)\n'+
'window.moveTo(l/2-(nim.width+dw)/2, t/2-(nim.height+dh)/2);\n'+
'document.images[0].style.visibility=""\n'+
'}\n'+
'nim.src="'+im+'";\n'+
'}\n'+
'<\/script>\n'+
'<body style="margin:0;padding:0;"><img style="visibility:hidden;" src="'+im+'">');
open_image.nwin.document.close();
return false;
}
onunload=function(){
if(open_image.nwin&&open_image.nwin.open)
open_image.nwin.close();
}

</script>
</head>
<body>
<h2>Images In this Demo &copy; 2007 loisimages.com</h2>
<a href="http://loisimages.com/Eyes_Trees%20in%20smoke1_400_optimized.jpg" onclick="return open_image(this.href);">Eye</a><br>
<a href="http://loisimages.com/blue_elephant3_400_optimized.jpg" onclick="return open_image(this.href);">Elephant</a><br>
<a href="http://loisimages.com/dog_tongue_out_400_optimized.jpg" onclick="return open_image(this.href);">Tongue</a><br>
</body>
</html>