Tags: , , | Categories: Web development Posted on 9/3/2006 2:26 AM | Comments (0)


This article describes how to open a picture in a popup window and close it with a single mouse click.


The idea behind the code is to programmatically create a new window with JavaScript, and also to write into it, with the simple document.write method. To understand this script, you must be able to understand basic HTML tags like html, body, a (anchor), and img.

The code

In the example, we will implement the main script only once, and we can use it any time on this page. So the first thing we have to do is to copy the following JavaScript block into the head of the HTML page:

function OpenNewWindow(bigurl, width, height)
    var newWindow = window.open("", "pictureViewer", "location=no, directories=no, fullscreen=no, " + "menubar=no, status=no, toolbar=no, width=" + width + ", height=" + height + ", scrollbars=no");
    newWindow.document.writeln("<body style='margin: 0 0 0 0;'>");
    newWindow.document.writeln("<a href='javascript:window.close();'>");
    newWindow.document.writeln("<img src='" + bigurl + "' alt='Click to close' id='bigImage'/>");

Of course, the script must be surrounded by <script> tags.

Let’s see how it works. The function has to be called with three parameters. The first one is the URL of the picture, what we would like to open, the second and the third are the dimensions of the picture.

In the first row of the function, a new window will be opened, with the specified height and width parameters. The window.open method also gets a name parameter (“pictureViewer”). If this parameter is not an empty string, all our pictures are opened in the same browser window that was opened first.

After opening a new window, the code will write a simple HTML page in it.

   <body style='margin: 0 0 0 0;'>
      <a href='javascript:window.close();'>
         <img src='xy.jpg' alt='Click to close' id='bigImage'/>

You can see that there is a small script in the anchor tag which can close the newly opened window. The name of the picture (xy.jpg) comes from the parameter value.

If you would like to use margins, you can alter the style attribute of the body tag.

Calling the script

In the main page, you must put an anchor tag to surround that content, which has to open the new window. For example, if you want to display a picture in a detailed view, you can use this:

<a href="#" onclick="OpenNewWindow('images/bigpicture.jpg', 500, 500); return true;">
   <img src="images/smallpicture.jpg" alt="Click..."/>

The big picture and the small picture image must exist at the specified position.

JavaScript running from local computer

Internet Explorer usually prohibits script running from the local computer. So you should avoid testing the attached HTML code with Internet Explorer from your local computer or you must always click on the “Allow blocked content” menu in the yellow bar.


Demo script: OpenImageScript-example.zip (574.00 bytes)

Add comment

  • Comment
  • Preview