Click here to Skip to main content
Click here to Skip to main content

Opening an image in a new closeable browser window

, 2 Sep 2006
Rate this:
Please Sign up or sign in to vote.
This article gives an example to beginner web developers about using JavaScript functions.

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author


Comments and Discussions

 
GeneralCorrection and suggestion (code sample) [modified] PinmemberRed Feet28-Aug-06 5:48 
AnswerRe: Correction and suggestion (code sample) Pinmemberboci28-Aug-06 23:12 
GeneralRe: Correction and suggestion (code sample) PinmemberGeoff Middleton2-Sep-06 10:58 
AnswerRe: Correction and suggestion (code sample) Pinmemberboci2-Sep-06 15:28 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140721.1 | Last Updated 2 Sep 2006
Article Copyright 2006 by István Kovács (HU)
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid