View Full Version : Snug fit window.open

08-23-2002, 04:18 PM
Does anyone have a nice small code that opens a piccy in a snug window i.e. around the picture, rather than just in a new window? The size would need to be variable.

I've had a script like this before but I had to handcode ALL the image sizes into individual javascript commands for every link and was well tedious.

The code that I have previously found is:

<SCRIPT language="JavaScript">
function openPicture(imageName,imageWidth,imageHeight,alt,posLeft,posTop) {
newWindow = window.open("","newWindow","width="+imageWidth+",height="+imageHeight+",left="+posLeft+",top="+posTop);
newWindow.document.write('<html><title>'+alt+'</title><body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginheight="0" marginwidth="0" onBlur="self.close()">');
newWindow.document.write('<img src='+imageName+' width='+imageWidth+' height='+imageHeight+' alt='+alt+'>');

and to open the picture...

<a href="javascript:openPicture('gallery/doleboyatwork.jpg','425','320','DoleBoy','100','100')">
<img src="gallery/small/doleboyatworksmall.jpg" border="0" width="50" height="38" alt=""></a>

any less fiddly way of opening the pic in this nice way?

08-23-2002, 04:42 PM
I have a group of functions that do that, and stuck them all in a .js file. The problem is that it has mixed results. Sometimes it works great, sometimes not.
var imgWin;
var thePic = new Image()
var theTitle = ""

function popImg(imgSrc) {
theTitle = imgSrc.substring(imgSrc.lastIndexOf('/') + 1, imgSrc.lastIndexOf('.'));
theTitle = theTitle.replace(/_/g," ");
imgWin = "";
imgWin = window.open('','','width=200, height=15, left=500, top=300');
with (imgWin.document) {
writeln('<style>span {font-family:arial; font-size: 12px }</style></head>');
writeln('<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">');
writeln('<center><span id="loading" style="display:block"><br><br>Loading Image...</span></center>');
writeln('<img src="" style="display:none" id="displayImage">');
thePic.src = imgSrc;
thePic.onLoad = openPicWin();

function openPicWin() {
var winWidth = 0;
var winHeight = 0;
if (!thePic.complete)
{ loop(); return; }
winWidth = thePic.width + 9;
winHeight = thePic.height + 28;
imgWin.loading.style.display = 'none'
imgWin.displayImage.src = thePic.src;
imgWin.displayImage.style.display = 'block';
imgWin.document.title = theTitle;
if (imgWin.document.body.clientWidth != (thePic.width - 1) || imgWin.document.body.clientHeight != (thePic.height - 1))

function loop() {
}To open the window, just call the function popImg(). As you can see, it's only parameter is the URI for the image. Example
<span onClick="popImg('images/photo1.jpg');">Open pic</span>Perhaps someone here can shed light for both of us :D

08-23-2002, 05:16 PM
ooh thanx. i like the look of that, its beyond my poor knowledge of javascript but I think I can see vaguely wots going on...

I'll play with it later, thank you!:cool: