So here I am learning Javascript. I have used it to create some very basic window.open commands for thumbnail images and the like. Now I am trying to create something slightly more complex.
On my site, I have javascript commands to open a window to a certain size when someone clicks a thumbnail. What I want now is for not only the picture to be opened in a new window, but also a title, description, and eventually a shopping cart button. I want all of this to be done with javascript so I don't have to write a seperate page for each image on the site (as there are plenty of them.)
Please note, all of my javascript is contained in a seperate file on the site with a .js extension. I'm not sure if that causes any problems, but as far as I understand, it shouldn't.
Here's what I tried:
I set up each image name as part of an array:
I have also set up the text I want for the description in a seperate array (with numbers to match the images in the previous array):
Then I write a function to open a new window and pass along the info:
I then call the code when the user clicks on the thumbnail image:
And the new window that opens (imgdisplay.html) has this code actually placed within it...it is not in the external .js file:
Now, obviously this isn't working, or I wouldn't be posting. This is just what I've put together with my very slim knowledge of javascript. All that happens when the thumbnail is clicked is the window is opened (properly sized and all) but containing nothing. Just a blank window. Somehow, my information is not getting passed from one page to other and I don't know how to make it work.
Someone please help!
On my site, I have javascript commands to open a window to a certain size when someone clicks a thumbnail. What I want now is for not only the picture to be opened in a new window, but also a title, description, and eventually a shopping cart button. I want all of this to be done with javascript so I don't have to write a seperate page for each image on the site (as there are plenty of them.)
Please note, all of my javascript is contained in a seperate file on the site with a .js extension. I'm not sure if that causes any problems, but as far as I understand, it shouldn't.
Here's what I tried:
I set up each image name as part of an array:
| Code: |
| var getround=new Array()
getround[1]="IMG_1236.jpg" getround[2]="IMG_1238.jpg" etc... |
I have also set up the text I want for the description in a seperate array (with numbers to match the images in the previous array):
| Code: |
| var roundtext=new Array()
roundtext[1]="blah blah blah" roundtext[2]="blah blah blah" etc... |
Then I write a function to open a new window and pass along the info:
| Code: |
| function displayround(x)
{ name="Round Pendant "+x dir="gallery/pendants/round/"+getround[x] text="<h1>"+name+"</h1><p>"+roundtext[x]+"</p><img src="+dir+" />" window.open("http://www.satoriglass.com/gallery/imgdisplay.html", "_blank", "width=450, height=650, directories=0, location=0, resizable=0, toolbar=0") return text } |
I then call the code when the user clicks on the thumbnail image:
| Code: |
| <img src="gallery/pendants/round/tn_IMG_1236.jpg" onClick="displayround(1)" alt="" border="0" align="center" /> |
And the new window that opens (imgdisplay.html) has this code actually placed within it...it is not in the external .js file:
| Code: |
| <script language="javascript">
<!-- Hide the script from old browsers -- document.write(text) //--> </script> |
Now, obviously this isn't working, or I wouldn't be posting. This is just what I've put together with my very slim knowledge of javascript. All that happens when the thumbnail is clicked is the window is opened (properly sized and all) but containing nothing. Just a blank window. Somehow, my information is not getting passed from one page to other and I don't know how to make it work.
Someone please help!
Haha! It's going to take me a while to figure out CRE Loaded...but I'm sure I will at some point. The first step I suppose is to upload it!
