Adding HTML to Popup Window

[Eulibrius7]

I have an image gallery and with onClick Popup window functionality. I'm not a native programmer so it's mostly cut & paste & modify. I'm much better @ ASP than Javascript so I have such a difficult time when it comes to JS. Anyway, the aforementioned functionality works fine as it is but I would like to make it possible for users be able to click on the image in the popup window to close itself or anywhere within the popup window. The problem I'm having is that I can't integrate the necessary code that would make this possible...I've included the URL of the gallery and Code Snippets below. Thank you in advance to anyone who can offer any assistance.

http://dox.bounceme.net/pics.asp?type_id=Cars&name_id=cmeft&record_name=Chrysler%20ME-Four%20Twelve
--------------------------------------------------------
function popup(url,windowname,width,height) {
width=(width)?width:screen.width/3;
height=(height)?height:screen.height/3;
var screenX = (screen.width/2 - width/2);
var screenY = (screen.height/2 - height/2);
var features= "width=" + width + ",height=" + height;
features += ",screenX=" + screenX + ",left=" + screenX;
features += ",screenY=" + screenY +",top=" + screenY;
var mywin=window.open(url, windowname, features);

if (mywin)
mywin.focus();
return mywin;

}

var myimage = new Image();
var popupwin=null;

myimage.onload=function(){popupwin=popup(this.src,"pic",this.width+20,this.height+20)}

function foo(what){
if (popupwin && !popupwin.closed)popupwin.close();
myimage.src=what;}
-------------------------------------------------------------

onClick = "foo(this.href);return false;"

[Pittimann]

Hi!

Your site is still loading, so I cannot yet look at it deeply.

Do you think it is a good idea to put images like that on your page (the big img and the 5 thumbnails displayed have a size of 1.5 megs together and I am wondering how many imgs still have to be loaded)?

Cheers - Pit

[Eulibrius7]

Yea... I have yet to resize and properly compress those images... still lots of details to work on the site... right now I'm more focused on the site's dynamic structure and working on the content would be my second priority. I hope you can help me with this javascript obstacle I'm currently faced with.

btw... the site is pulling right off of my PC... since I'm hosting an IIS server... it's mucho fast on my machine during testing but I forgot what impact it has on an external party accessing the site... but that shouldn't be an issue once I compress the pics.

[Pittimann]

Hi!

You should particularly take care that the thumbnails are also much smaller in file size and not only pixelwise.

You will have to document.write the images to the popup. If you modify the function in question like this:

function popup(url,windowname,width,height) {
width=(width)?width:screen.width/3;
height=(height)?height:screen.height/3;
var screenX = (screen.width/2 - width/2);
var screenY = (screen.height/2 - height/2);
var features= "width=" + width + ",height=" + height;
features += ",screenX=" + screenX + ",left=" + screenX;
features += ",screenY=" + screenY+",top=" + screenY;
var mywin=window.open('about:blank', windowname, features);
if (mywin)
mywin.document.write('<img src="'+url+'" title="&nbsp;Please click image to close window!&nbsp;" border=0 onclick="window.close()">');
mywin.document.close();
mywin.focus();
return mywin;
}

it will do what you want. In this example, the user just has to click the enlarged image to close the popup.

Another thing: you should use:
<td><img src = '/pics/Cars/cmeft/2004-Chrysler-ME-Four-Twelve-Concept-Engine-Compartment-1280x960.jpg' width="100" onClick = "foo(this.src);return false;"><td> and NOT href.

IE accepts that, even though there is no href in the img tag. To make your stuff work with Mozilla based browsers as well, you will need to change all instances of this.href in your thumbnail tags to this.src...

Cheers - Pit

[Eulibrius7]

I spent the better half of my saturday flopping around with this javascript issue and you spend 2 minutes (-1min59sec site load time) ;] on it and it is flawless fixed. I just wished I had a better grasp on javascript syntax/logic that way I could easily manipulate or even write my own code like I do with ASP. You are amazing thank you so much!

[Pittimann]

Hi!

You're welcome! :D

One thing, I'd like to add: maybe you better set your thumbnails' cursor to 'pointer' and add a title like title="enlarge", so that users will imediately know, that something will happen onclick...

Cheers - Pit