Welcome to WebmasterWorld Guest from 18.208.159.25

Forum Moderators: open

Message Too Old, No Replies

Javascript popup image centred...

     
3:19 pm on Dec 9, 2003 (gmt 0)

Full Member

10+ Year Member

joined:May 13, 2003
posts:313
votes: 0


i need a script that will open any image thumbnail on a webpage in a new window that is sized to fit the image perfectly, and is also centred on the page!

anybody got an ideas?
also would help if it was light weight!

Dan

4:32 pm on Dec 9, 2003 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts:1019
votes: 39


Hi there humpingdan,

Try this ...


<html>
<head>

<script type="text/javascript">
//<![CDATA[
function popup(url,windowname,width,height,features)
{
width=(width)?width:screen.width/2;
height=(height)?height:screen.height/2;
var screenX = (screen.width/2 - width/2);
var screenY = (screen.height/2 - height/2);
var features= "width=" + width + ",height=" + height +",scrollbars=no,status=no";
features += ",screenX=" + screenX + ",left=" + screenX;
features += ",screenY=" + screenY + ",top=" + screenY;

var mywin=window.open(url, windowname, features);
if (mywin)
mywin.focus();
return mywin;
}
//]]>
</script>
</head>
<body>

<a href="your_image.html" onclick="popup(this.href,'win1',200,200);return false" >Pop_Up</a>

</body>
</html>

  • Set the figures shown in bold to the size of your image
  • Put your image in an .html file
  • Add this code to the body tag of this file
    style="margin:0"
  • Then smile....you've finished

birdbrain

4:37 pm on Dec 9, 2003 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts:1019
votes: 39


p.s. put your thumbnail in the position occupied by
Pop Up
4:37 pm on Dec 9, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 25, 2002
posts:3185
votes: 0


You could use window.open for the window and adjust the top and left attributes depending on the client browser available width, and the width and height depending on the size of the target image.

Before we go any further, you say centre of the page, and by that I think that you mean the browser window. We can detect the users screen resolution and the available width and height of the browser window (don't forget, the browser could be in 'window' mode anywhere on the screen!). It can get very complicated to try and work out exactly where the centre is. My advice would be to open the new window in the centre of the screen, or just let things take their natual course!

Using window.open in a function, you could pass in the width and height of the image in the href as the window dimensions (don't forget to increase the height to allow for the title bar!).

5:06 pm on Dec 9, 2003 (gmt 0)

Full Member

10+ Year Member

joined:May 13, 2003
posts:313
votes: 0


thanking you!