Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Location
    Brighton
    Posts
    180
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Snug fit window.open

    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="+posTo p);
    newWindow.document.open();
    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+'>');
    newWindow.document.write('</body></html>');
    newWindow.document.close();
    newWindow.focus();
    }
    //-->
    </SCRIPT>

    and to open the picture...

    <a href="javascriptpenPicture('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?

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Code:
    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('<HTML><HEAD><TITLE>Loading...</TITLE>');
    		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">');
    		writeln('</body></html>');
    		close();
    		}
    	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))
    		imgWin.resizeTo(winWidth,winHeight);
    	}
    
    function loop() {
    	setTimeout('openPicWin();',50);
    	}
    To open the window, just call the function popImg(). As you can see, it's only parameter is the URI for the image. Example
    Code:
    <span onClick="popImg('images/photo1.jpg');">Open pic</span>
    Perhaps someone here can shed light for both of us

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Location
    Brighton
    Posts
    180
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •