The window.open JavaScript method is one of most used in web sites. To be honest, it has been a little bit overused in the past and today lightbox effects are preferred. However I still use it, especially when displaying a large image.
In this article I will show you how to open a new window and resize it appropriately.
The opening
First of all, we have to decide which element will open a new window. Imagine we want to open a new window when the user clicks on an image. The window will contain a larger image. Our small picture will be something like:
<a href="javascript:void(popupImg('images/gallery/big/01.jpg'))"><img src="images/gallery/small/01.jpg" alt=""></a>
When the user clicks on the image, the popupImg function will be called.If you prefer, we can use the onClick event:
<img src="images/gallery/small/01.jpg" alt="" onClick="popupImg('images/gallery/big/01.jpg')">
The function
The open() method has a simple syntax. We are talking about a method applied to the window object:
window.open (URL, windowName[, windowFeatures])
where: URL is the URL of the page to be opened;
windowName is the name or target of the new window. It can be:
_blank - a new window;
_parent - the URL is loaded in the parent window;
_self - the URL replaces the window;
_top - the URL replaces the frame set;
name - the name of the window;
windowFeatures are features assigned to the new window. Those features can be:
status - can be yes, no, 0 or 1 (default is yes) - display the status bar;
titlebar - can be yes, no, 0 or 1 (default is yes) - display the title bar;
toolbar - can be yes, no, 0 or 1 (default is yes) - display the tool bar;
menubar - can be yes, no, 0 or 1 (default is yes) - display the menu bar;
height - in pixels - determine the height;
width - in pixels - determine the width;
top - in pixels - determine the top position;
left - in pixels - determine the left position;
location - can be yes, no, 0 or 1 (default is yes) - display the address bar;
fullscreen - can be yes, no, 0 or 1 (default is no) - display in full screen or not;
channelmode - can be yes, no, 0 or 1 (default is no and for IE only) - display in theater mode or not;
directories - can be yes, no, 0 or 1 (default is yes and for IE only) - display directories button or not.
We are going to use some of those optional features.
The popupImg function
Let's see the function:
function popupImg(url)
{
The function has a parameter: the url we passed when the function is called ("images/gallery/big/01.jpg" in our example). That's where we get the content of the new window.
prev = window.open("","_blank","resizable=no,scrollbars=no,location=no,menubar=no,status=no,toolbar=no");
prev.document.open();
We open the new window using the open() method and pass just a few optional parameters. What we basically do is open a new blank window, with "_blank". This will make open a new and empty window.
prev.document.writeln("<html><head><title>Preview</title></head>")
prev.document.writeln("<body bottommargin=0 leftmargin=0 marginheight=0 marginwidth=0 rightmargin=0 topmargin=0>");
Then we start writing inside the new window inserting the <head> and <title>. We open the <body> tag and give it a few parameters.
prev.document.writeln("<script type='text/javascript'>");
prev.document.writeln("function completeImg() {");
prev.document.writeln("i = document.getElementById(\"imm\");");
prev.document.writeln("window.resizeTo(i.width + 6, i.height + 80);");
prev.document.writeln("window.moveTo((screen.width - i.width) / 2, (screen.height - i.height) / 2);");
prev.document.writeln("}");
prev.document.writeln("</script>");
The previous part is inserting a JavaScript script, with a function called completeImg. The function will resize the window and move it to the center of the screen, once the image is completely loaded.
prev.document.writeln("<a href=\"javascript:window.close();\">");
prev.document.writeln("<img src=\""+url+"\" hspace=\"0\" vspace=\"0\" border=\"0\" alt=\"\" id=\"imm\" name=\"imm\" onload=\"return completeImg();\">");
prev.document.writeln("</a>");
The previous part is inserting the image surrounded by an <a> tag so that when the user click the image, the new window will close. Then there's the completeImg function called when the image is loaded (onLoad).
prev.document.writeln("</body>");
prev.document.writeln("</html>");
prev.document.close();
}
Finally we close everything. The example shown should be considered as an exercise. I actually use it sometimes and it works very well. You should check the part which resizes and centers the new window, because you may need to adjust it a bit, considering the size of your image.
Hope you find it useful.
0 thoughts:
Post a Comment
Comments are moderated. I apologize if I don't publish comments immediately.
However, I do answer to all the comments.