Introduction
This article describes how to open a picture in a popup window and close it with a single mouse click.
Concept
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("<html>");
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'/>");
newWindow.document.writeln("</a>");
newWindow.document.writeln("</body></html>");
newWindow.document.close();
}
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.
<html>
<body style='margin: 0 0 0 0;'>
<a href='javascript:window.close();'>
<img src='xy.jpg' alt='Click to close' id='bigImage'/>
</a>
</body>
</html>
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..."/>
</a>
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.
Hungarian version
The Hungarian version of this article is accessible here.
