...

View Full Version : Updating an image in new window while retaining focus



mpclubfoot
12-10-2004, 03:37 PM
Hello all,

I work on a site that has a number of image galleries set up as clickable thumbnails. On a click, some js is called that opens a new window, sizes it and displays a large image there.

Originally, I had an .html page for every image but that quickly grew cumbersome. My second try was to write the image directly to the page with a call to document.write(). This version opened the image but when the user clicked another thumbnail, the image didn't change and the new window lost focus.

My third and current version is a kludgy monstrousity that opens a new window, then closes it, then opens it again and displays the image. It's the only way I could figure out to both change the image and retain the focus. This version works for most of the site's users but not all.

Is there a better way to do this? To be clear, the behavior should be as follows:

1. user clicks first thumbnail
2. image window opens over the main window, and displays the enlarged image
3. without closing the image window, the user clicks another thumbnail on the main window.
4. image window is updated to display new enlarged image and gets the focus (comes to the front)

My code is below. Thanks for any suggestions you might have!

Christian

//opens a window to show an enlarged photo
function newEnlargeWin(img, ttl, w, h){
var winStr = "width=" + w + ",height=" + h +",left=0,top=0,toolbar=no,scrollbars=no,resizable=no"
var largeWin = window.open("", "largeWindow", winStr)
largeWin = largeWin.close()
largeWin = window.open("", "largeWindow", winStr)
largeWin.document.write("<html><head><title>" + ttl + "</title></head>"
+ "<body onload='self.focus()' leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>" + "<img src='" + img + "'></body></html>")
largeWin = largeWin.focus()
}

//use to add a status bar description of the current link
function linkDescription( descriptionStr ){
window.status = descriptionStr
}

//example call
<a href="javascript:newEnlargeWin('image.jpg', 'title', 504, 336)"
onmouseover="linkDescription('description');return true;"
onmouseout="linkDescription('');return true;">
<img src="thumbnail.jpg">
</a>

Kor
12-10-2004, 04:22 PM
Forget about document.write() method. It was never a dynamic one. Use either innerHTML attribute or DOM methods.


For me.. I'd prefere the DOM. Example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
.point{
cursor:pointer;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
function showBig(b){
var root = document.getElementById('big');
while(root.hasChildNodes()){
root.removeChild(root.childNodes[0])//clears the div from possible former IMGs
}
var oImg = document.createElement('img');//creates the HTML element IMG
oImg.setAttribute('src',b);// gives the attribute SRC and its value
root.appendChild(oImg);//append the element inside the div
}
</script>
</head>
<body>
<img class ="point" src="00.jpg" onclick="showBig('00_big.jpg')"><br>
<img class ="point" src="01.jpg" onclick="showBig('01_big.jpg')"><br>
<img class ="point" src="02.jpg" onclick="showBig('02_big.jpg')">
<br>
<div id="big"></div>
</body>
</html>

mpclubfoot
12-10-2004, 05:14 PM
Kor,

Thanks for the answer. To be honest, I know nothing about DOM but I pasted your code into an .html doc, changed the srcs to point to some images on my hard drive and it worked -- almost.

The problem is that I need the images to appear in a separate window. I added some code to your solution that does this. Could you take a look at it and see if there are any obvious problems?

Also, since I've never dealt with DOM, are there any issues I should know about -- e.g. browser compatability, or host capabilities?

Thanks,
Christian


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
.point {cursor:pointer}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
function showBig(b){
var winStr = "width=336,height=504,left=0,top=0,toolbar=no,
scrollbars=no,resizable=no";
var largeWin = window.open("", "largeWindow", winStr);
largeWin.document.write(
"<html><head><title>Image Window</title></head>"
+ "<body onload='self.focus()' leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>"
+ "<div id='big'></div></body></html>");

var root = largeWin.document.getElementById('big');
while(root.hasChildNodes()){
root.removeChild(root.childNodes[0])
}
var oImg = largeWin.document.createElement('img');
oImg.setAttribute('src',b);
root.appendChild(oImg);
largeWin.focus();
}

function linkDescription( descriptionStr ){
window.status = descriptionStr
}
</script>
</head>
<body>
<img class="point" src="00.jpg"
onmouseover="linkDescription('view image 00');return true;"
onmouseout="linkDescription('');return true;"
onclick="showBig('00_big.jpg')"><br>
<img class="point" src="01.jpg"
onmouseover="linkDescription('view image 01');return true;"
onmouseout="linkDescription('');return true;"
onclick="showBig('01_big.jpg')"><br>
<img class="point" src="02.jpg"
onmouseover="linkDescription('view image 02');return true;"
onmouseout="linkDescription('');return true;"
onclick="showBig('02_big.jpg')"><br>
<!-- <div id="big"></div> -->
</body>
</html>

Kor
12-12-2004, 07:26 PM
I need the images to appear in a separate window


What about users which might disable your new pop-up opened window? You might build a visible/hidden layer better for your job, similar with a pop up, with a close button and so on...

glenngv
12-13-2004, 05:26 AM
http://www.codingforums.com/showthread.php?t=9836

mpclubfoot
12-13-2004, 10:12 PM
You might build a visible/hidden layer better for your job, similar with a pop up, with a close button and so on...

Could you point me toward some literature on building layers. I am unfamiliar with this.

Thanks to both of you for your great suggestions so far!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum