Forum Moderators: open

Message Too Old, No Replies

Javascript popup image centred...

         

humpingdan

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

10+ Year Member



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

birdbrain

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



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

birdbrain

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



p.s. put your thumbnail in the position occupied by
Pop Up

BlobFisk

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

WebmasterWorld Senior Member 10+ Year Member



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!).

humpingdan

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

10+ Year Member



thanking you!