I am trying to get 4 sets of thumbnails (each set in a hidden div tag) to onClick show in a main picture box. The links to the hidden divs are just below the main picture box. I can get everything to work, but my problem is when the next and previous are clicked ALL pictures are shown.
What I would like is when the first set of thumbnails comes up, the big picture will only scroll through the first set of large pictures...etc...
I dont know if this makes since to anyone...??? I think I need 4 sets if arrays but not sure how to code the javascript for the arrays that coincide with the next and previous....
here is the code I have so far in an external javascript file...
Expand|Select|Wrap|Line Numbers
- var num=0
- img0 = new Image ()
- img0.src = "1.gif"
- img1 = new Image ()
- img1.src = "2.gif"
- img2 = new Image ()
- img2.src = "3.gif"
- img3 = new Image ()
- img3.src = "4.gif"
- img4 = new Image ()
- img4.src = "5.gif"
- img5 = new Image ()
- img5.src = "6.gif"
- img6 = new Image ()
- img6.src = "7.gif"
- img7 = new Image ()
- img7.src = "8.gif"
- img8 = new Image ()
- img8.src = "9.gif"
- img9 = new Image ()
- img9.src = "10.gif"
- function next()
- {
- num=num+1
- if (num==10)
- {num=0}
- document.mypic.src=eval("img"+num+".src")
- }
- function prev()
- {
- num=num-1
- if (num==10)
- {num=0}
- document.mypic.src=eval("img"+num+".src")
- }
- //put thumb into large window
- function canManipulateImages() {
- if (document.images)
- return true;
- else
- return false;
- }
- function loadmypic(imageURL) {
- if (gImageCapableBrowser) {
- document.mypic.src = imageURL;
- return false;
- }
- else {
- return true;
- }
- }
- gImageCapableBrowser = canManipulateImages();
- function canManipulateImages() {
- if (document.images)
- return true;
- else
- return false;
- }
- function loadthumbsad(imageURL) {
- if (gImageCapableBrowser) {
- document.thumbsad.src = imageURL;
- return false;
- }
- else {
- return true;
- }
- }
- gImageCapableBrowser = canManipulateImages();