Swiss Army--linking a thumbnail from 1 page to part of a slideshow on a different one

[parodeis]

1) Script Title: Swiss Army Image Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/swissarmy/

3) Describe problem: Hello,

I have searched around the forums, but I haven't found a thread that really matched my need, although some have come close. I have a fair amount of html and css knowledge, but javascript is new to me. I am putting together a big picture gallery, and I want to have a main page with thumbnail pictures on it. Then, I want to be able to click on a thumb and go to that image in the slideshow, which is on a different page. My thought is to have the option to browse over all the small pics, or to scroll through the larger pics 1 by 1. I am using the #2 show.

Is it possible to do what I want? Would it be easier/better to put the slideshow and thumbs on the same page (maybe with an anchor so the user doesn't have to scroll around to find it)?

Here is the code I have so far:
In the head:

<script type="text/javascript">

//If using image buttons as controls, Set image buttons' image preload here true
//(use false for no preloading and for when using no image buttons as controls):
var preload_ctrl_images=true;

//And configure the image buttons' images here:
var previmg='left.gif';
var stopimg='stop.gif';
var playimg='play.gif';
var nextimg='right.gif';


var slides2=[]; //SECOND SLIDESHOW
//configure the below images and descriptions to your own. 
slides2[0] = ["images/aerostar/aerostar1.jpg", "Aerostar"];
slides2[1] = ["images/aerostar/aerostar2.jpg", "Aerostar"];
slides2[2] = ["images/aerostar/aerostar3.jpg", "Aerostar"];
slides2[3] = ["images/aerostar/aerostar4.jpg", "Aerostar"];
//optional properties for these images:
slides2.desc_prefix='<b>Description:<\/b> '; //string prefix for image descriptions display
slides2.controls_top=1; //use for top controls
slides2.counter=1; //use to show image count
slides2.width=640; //use to set width of widest image if dimensions vary
slides2.height=480; //use to set height of tallest image if dimensions vary
slides2.no_auto=1; //use to make show completely user operated (no play button, starts in stopped mode)
slides2.use_alt=1; //use for descriptions as images alt attributes
slides2.use_title=1; //use for descriptions as images title attributes
slides2.nofade=1; //use for no fade-in, fade-out effect for this show
slides2.border=2; //set border width for images
slides2.border_color='#330000'; //set border color for images


</script>

<script src="swissarmy.js" type="text/javascript">

And in the Body:

<p>

<script type="text/javascript">
new inter_slide(slides2)
document.write('<div style="text-align:center;margin-top:5px;">')
for (var i_tem = 0; i_tem < slides2.length; i_tem++)
document.write('<span id="trace0_'+i_tem+'" style="border:1px solid black;cursor:pointer;background-color:'+(i_tem? '#d9dae7' : 'white')+';padding:2px;" onclick="if (iss[0].playing){iss[0].gostop(iss[0].go(\'gostp0\'));setTimeout(\'iss[0].jumper('+[i_tem+1]+')\', 1000);}else{iss[0].jumper('+[i_tem+1]+');}">'+[i_tem+1]+'<\/span> ');
document.write('<\/div>')
</script>
</p>

I got all this code so far from this thread as well as the original url, but I am so new to javascript that I don't know what to do with it now. I don't expect someone to spoon feed me all of this--I know it must be a lot--but if someone could at least point me in the right direction of where to look for the answer, that would be great!

Sorry if this is a repeat topic...

Thanks in advance!

[parodeis]

btw, here is the page I am talking about:

http://www.dream-rc-airplanes.com/gallery2.html

The thumbnails are on http://www.dream-rc-airplanes.com/gallery.html

Please pardon the dust...this site is still *very* under construction!

[jscheuer1]

See:

http://www.dynamicdrive.com/forums/s...14&postcount=4

[parodeis]

thanks, I will try that!

I really like the code, btw.