Jump to content

Generated pop-up


kurt.santo
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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();}

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...