Generated pop-up

kurt.santo · October 23, 2007

Opening a pop-up the browser is still attempting to do sth with the window. Where lies my mistake? The files are under http://www.jalp.co.uk/imageSwap/picture.php?id=12.Then, for each product there are three thumbs, which change the main image. How could I amend my script to open the enlarged photo of the version displayed as the main photo? The photo name reflects the version as they are called 1-productId.gif, 2-productId.gif and 3-productId.gif. Thumbs, main images and enlarged images all have the same name, they are just placed in different folders. Instead of having "<img src="enlarged/3-<?php echo $_GET['id']; ?>.gif" width="650" height="650" alt="enlarged product photo" title="enlarged product photo">" could I have sth as "<img src="enlarged/JavaScriptToGetMainImageFileName.gif" width="650" height="650" alt="enlarged product photo" title="enlarged product photo">?Kurt

justsomeguy · October 23, 2007

The function that opens the window needs to be aware of the last file that was rolled over. Instead of having inline code in the onmouseover event for the thumbnails, they need to execute a function to change the main image and also make a note of which image is being shown in the main image so that the function that opens the window can read that and show the appropriate one. You can use a global variable to keep track of the current image being shown.

kurt.santo · October 24, 2007

The function that opens the window needs to be aware of the last file that was rolled over. Instead of having inline code in the onmouseover event for the thumbnails, they need to execute a function to change the main image and also make a note of which image is being shown in the main image so that the function that opens the window can read that and show the appropriate one. You can use a global variable to keep track of the current image being shown.

But how can I generalise the onmouseover event in a function? Currently for each thumb the relevant picuture is named in it's onmouseover event ("onMouseOver="document.rollimg.src=image0.src;")...Kurt

justsomeguy · October 24, 2007

onmouseover="change_image(image0.src);"The change_image function would change the src property for rollimg and would update a global variable with the name of the picture being shown.

kurt.santo · October 24, 2007

onmouseover="change_image(image0.src);"The change_image function would change the src property for rollimg and would update a global variable with the name of the picture being shown.

Would that be sth along the lines if (thumb==this) src=, else...? Kurt

justsomeguy · October 24, 2007

You don't need an if statement, you're not checking anything. You just assign the src property and set a global variable.

var pic = "";function change_image(val){  document.rollimg.src = val;  pic = val;}

kurt.santo · October 25, 2007

You don't need an if statement, you're not checking anything. You just assign the src property and set a global variable.

function goWin() {var windowprops ="width=690px,height=740px,top=50px,left=50px,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no";TheWin = window.open('','image',windowprops);TheWin.document.write('<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd"><html xmlns="http:\/\/www.w3.org\/1999\/xhtml">');TheWin.document.write('<head><title>Enlarged Photo<\/title><\/head><body style="overflow:hidden;margin:20px;background-color:#FFF;">');TheWin.document.write('<p><img src="enlarged/3-<?php echo $id; ?>.gif" width="650" height="650" alt="enlarged product photo" title="enlarged product photo"><\/p>');TheWin.document.write('<div align="center"><a href=\"java script:void(0)\" onclick=\"window.close()\">Close Window</a><\/div><\/body><\/html>');TheWin.focus();}

Kurt

justsomeguy · October 25, 2007

To get it to load the right picture in the popup, yes, you need to replace the file name of the image to load with whatever is in the pic variable. I'm not sure what you're referring to with the problem with the popup, but when I have Opera give me the generated source code after Javascript I get this:

<html><HEAD><TITLE>Enlarged Photo</TITLE></HEAD><BODY style="overflow:hidden;margin:20px;background-color:#FFF;"><P><IMG src="enlarged/3-12.gif" width="650" height="650" alt="enlarged product photo" title="enlarged product photo"></P><DIV align="center"><A href="java script:void(0)" onclick="window.close()">Close Window</A></DIV></BODY></html>

One thing I notice is you don't need all the additional slashes. You can replace this line:

TheWin.document.write('<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd"><html xmlns="http:\/\/www.w3.org\/1999\/xhtml">'

With this:

TheWin.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">'

A forward slash is a legal character, you don't need to escape it. Having those backslashes will actually write the backslashes to the page. Also, remove the space between "java" and "script" in the close link.

kurt.santo · October 26, 2007

I'm not sure what you're referring to with the problem with the popup

When I open the pop-up in any browser the image is displayed, but you still see the sand-clock (indicating that the page still loads). Then, you also see the message "... transferring data from localhost..." or similar (also does it when online). Why is that?Then, I came across another issue: if a use clicks again onto the link to open pop up it places the picture againg underneath the already showing one (you see the top of the pic). How can I prevent this?I will know try to see if I can come up myself with a function to change the reference to the "pop-up file"....Kurt

justsomeguy · October 26, 2007

When I open the pop-up in any browser the image is displayed, but you still see the sand-clock (indicating that the page still loads). Then, you also see the message "... transferring data from localhost..." or similar (also does it when online). Why is that?

I don't know, but take out all of the slashes that are escaping the / character, they shouldn't be there. Refer to my last post. It might say the page is still loading because of the invalid tags. IE says that it is downloading the image.

Then, I came across another issue: if a use clicks again onto the link to open pop up it places the picture againg underneath the already showing one (you see the top of the pic). How can I prevent this?

You keep using document.write to add more HTML to the window, so you need to find a way to clear the contents first. You might want to check to see if the window is already open and close it if it is, before you open a new one.

kurt.santo · October 26, 2007

I don't know, but take out all of the slashes that are escaping the / character, they shouldn't be there. Refer to my last post. It might say the page is still loading because of the invalid tags. IE says that it is downloading the image.You keep using document.write to add more HTML to the window, so you need to find a way to clear the contents first. You might want to check to see if the window is already open and close it if it is, before you open a new one.

Took out the slashes as adviced, but problem still exists. Why is that? Also, trying to come up with a solution to use the var pic to open the right image in the pop-up (might take me years, so it seems at least) I just now noticed that this is not the image I want to open. It is the bigger version of that one. How would I use the var then to get the right image soure? I know I asked this before, but is it really not sth as if (this picture) then take this large picture, if (that picture) then take that other large picture etc? Really do not know how to start this...Kurt

justsomeguy · October 29, 2007

If the pic variable contains the filename then just substitute that into the code...

TheWin.document.write('<p><img src="enlarged/' + pic + '" width="650"...

There needs to be an image with the same filename as the rollover image, just in the enlarged folder. You might have to mess around with paths to get it to find the images, but if you have the image name in a variable then it would make sense to print that variable in place of the image name.

kurt.santo · October 29, 2007

If the pic variable contains the filename then just substitute that into the code...
TheWin.document.write('<p><img src="enlarged/' + pic + '" width="650"...
There needs to be an image with the same filename as the rollover image, just in the enlarged folder. You might have to mess around with paths to get it to find the images, but if you have the image name in a variable then it would make sense to print that variable in place of the image name.

Justsomeguy, I really appreciate your help in this matter. On my own it might take a century to figure this out. Tried you code (files have all same name, only stored in different folders , which are "thumbs, main, enlarged"), but did not work. Correct me if I got this wrong, but is the value stored in pic not the filename including the path of the main picture (for example main/1-12.gif)? If yes, how would I replace "main" with "enlarged"? Then it should work, shouldn't it?Kurt

justsomeguy · October 29, 2007

I don't know, do an alert on pic and see what it says. If would be best if it only stored the filename and not the folder, you can manually add the folder based on the situation.

kurt.santo · October 30, 2007

I don't know, do an alert on pic and see what it says. If would be best if it only stored the filename and not the folder, you can manually add the folder based on the situation.

Alert give the whole schebang as "http://localhost/imgSwap/main/3-12.gif". I even did not manage just to open the main image in pop-up... Do you have any suggestions?n I will keep trying myself, but seems I never really come up with much:-(Kurt

justsomeguy · October 30, 2007

It's better not to use image objects in Javascript, just have variables with the name. So instead of this:image0 = new Image;image1 = new Image;image2 = new Image;image0.src = 'main/1-12.gif';image1.src = 'main/2-12.gif';image2.src = 'main/3-12.gif';do this:image0_src = '1-12.gif';image1_src = '2-12.gif';image2_src = '3-12.gif';Then your rollover would look like this:change_image(image1_src)And you would need to change the change_image function to include the folder when you change the big image. Since the pic variable only contains the filename, you can use it in the window opening function to include the filename with the apropriate folder for the larger image.

kurt.santo · October 31, 2007

It's better not to use image objects in Javascript, just have variables with the name. So instead of this:image0 = new Image;image1 = new Image;image2 = new Image;image0.src = 'main/1-12.gif';image1.src = 'main/2-12.gif';image2.src = 'main/3-12.gif';do this:image0_src = '1-12.gif';image1_src = '2-12.gif';image2_src = '3-12.gif';Then your rollover would look like this:change_image(image1_src)And you would need to change the change_image function to include the folder when you change the big image. Since the pic variable only contains the filename, you can use it in the window opening function to include the filename with the apropriate folder for the larger image.

justsomeguy,Thank you for your assistance. How would I change the change_image function? I first thought along the lines "val=+'main/'+val;", but realised that this would be stupid as I would end up again with a the folder name stored in pic. Also, why is it not a good idea to use image objects in Javascript? I have no doubt in what you are saying, it is just for me good to know so I can learn a bit more about Javascript...Kurt

justsomeguy · October 31, 2007

Using images in general is fine, it's just not necessary for this case. The browser will set the image src property to the full path, so for this case it's not useful. You only want to store the filename. You don't want to change val, don't add the path to it. Add the path when you assign the src.document.rollimg.src = 'main/' + val;Similar with the function that opens the window, type the path and append the filename.

kurt.santo · November 1, 2007

Using images in general is fine, it's just not necessary for this case. The browser will set the image src property to the full path, so for this case it's not useful. You only want to store the filename. You don't want to change val, don't add the path to it. Add the path when you assign the src.document.rollimg.src = 'main/' + val;Similar with the function that opens the window, type the path and append the filename.

That is great, image swap works and getting closer with pop-up. The pop-up will work as long as you swapped the main image before, but obviously when you don't there is nothing stored in the variable and it does not work. What is the general way to supply a default? Also, still when I open the pop-up in any browser the egg timer and progress bar will not stop showing as browser still seems to load sth. Why is that? My code of pop-up is:

function goWin() {var windowprops ="width=690px,height=740px,top=50px,left=50px,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no";TheWin = window.open('','image',windowprops);TheWin.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">');TheWin.document.write('<head><title>Enlarged Photo<\/title><\/head><body style="overflow:hidden;margin:20px;background-color:#FFF;">');TheWin.document.write('<p><img src="enlarged/' + pic + '" width="650" height="650" alt="enlarged product photo" title="enlarged product photo"><\/p>');TheWin.document.write('<div align="center"><a href=\"java script:void(0)\" onclick=\"window.close()\">Close Window</a><\/div><\/body><\/html>');TheWin.focus();}

Kurt

jesh · November 1, 2007

Also, still when I open the pop-up in any browser the egg timer and progress bar will not stop showing as browser still seems to load sth. Why is that?

You need to close the child window's document object.

...TheWin.document.write('<div align="center"><a href=\"java script:void(0)\" onclick=\"window.close()\">Close Window</a><\/div><\/body><\/html>');TheWin.document.close();TheWin.focus();}

justsomeguy · November 1, 2007

For a default check if the variable is empty before you use it, or initialize it to the first value when you define it.

kurt.santo · November 1, 2007

the child window's document object.

I did as adviced and works. Cheers, mate! But what does it acually meann to close the document object of the pop up window?Kurt

kurt.santo · November 1, 2007

For a default check if the variable is empty before you use it, or initialize it to the first value when you define it.

I initialise it now as "var pic = "1-<?php echo $id; ?>.gif";", which works fine:-) I appreciate that you took all that time to help me out with this one (and so many others). It is amazing to have such great help (and thanks to everyone else)...Kurt

justsomeguy · November 1, 2007

I did as adviced and works. Cheers, mate! But what does it acually meann to close the document object of the pop up window?

You need to call the document.close method to tell the browser that the document is finished. You see the loading message because the browser has not been told that the end of the document has been reached, it is still expecting more content. Calling the close method indicates to the browser that the document is completely loaded.

kurt.santo · November 2, 2007

You need to call the document.close method to tell the browser that the document is finished. You see the loading message because the browser has not been told that the end of the document has been reached, it is still expecting more content. Calling the close method indicates to the browser that the document is completely loaded.

Now I understand. That makes perfect sense... Cheers!Kurt

Generated pop-up

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived