Trouble linking a slideshow image to url

Hi all.

I created a slideshow at [URL=”http://eviealtman.com/pieces.html”]http://eviealtman.com/pieces.html[/URL] using the following javascript.

[QUOTE]

<div class=”photoslider” id=”default”></div>

<script type=”text/javascript”>
$(document).ready(function(){
FOTO.Slider.preloadImages(‘default’);

FOTO.Slider.baseURL = ‘images/’;
FOTO.Slider.bucket = {
‘default’: {
0: {‘thumb’: ‘/thumbnails/books.gif’, ‘main’: ‘/main/books.gif’, ‘caption’: ‘Books’},
1: {‘thumb’: ‘/thumbnails/bottletree1.gif’, ‘main’: ‘/main/bottletreels.gif’, ‘caption’: ‘Bottle Tree’},
2: {‘thumb’: ‘/thumbnails/capecod.gif’, ‘main’: ‘/main/capecod.gif’, ‘caption’: ‘Cape Cod’},
3: {‘thumb’: ‘/thumbnails/ceiling.gif’, ‘main’: ‘/main/ceiling.jpg’, ‘caption’: ‘Ceiling Sun’},
4: {‘thumb’: ‘/thumbnails/cpost.gif’, ‘main’: ‘/main/clamp.jpg’, ‘caption’: ‘Unity Lamppost’},
5: {‘thumb’: ‘/thumbnails/deserve.jpg’, ‘main’: ‘/main/deserve.gif’, ‘caption’: ‘Deserve’},
6: {‘thumb’: ‘/thumbnails/empathy.gif’, ‘main’: ‘/main/empathy.gif’, ‘caption’: ‘Empathy’},
7: {‘thumb’: ‘/thumbnails/grounded.gif’, ‘main’: ‘/main/grounded.gif’, ‘caption’: ‘Grounded’},
8: {‘thumb’: ‘/thumbnails/headboard.gif’, ‘main’: ‘/main/headboard.gif’, ‘caption’: ‘Headboard’},
9: {‘thumb’: ‘/thumbnails/lamppost.gif’, ‘main’: ‘/main/lamppost.jpg’, ‘caption’: ‘Light Tree’},
10: {‘thumb’: ‘/thumbnails/midlamp.gif’, ‘main’: ‘/main/medlamp.jpg’, ‘caption’: ‘Lamp #2 (of 3)’},
11: {‘thumb’: ‘/thumbnails/metro.gif’, ‘main’: ‘/main/metro.gif’, ‘caption’: ‘Metrophonic’},
12: {‘thumb’: ‘/thumbnails/mft.gif’, ‘main’: ‘/main/mft.gif’, ‘caption’: ‘My Favorite Things’},
13: {‘thumb’: ‘/thumbnails/mobile.gif’, ‘main’: ‘/main/mobile.jpg’, ‘caption’: ‘MObile’},
14: {‘thumb’: ‘/thumbnails/mom.gif’, ‘main’: ‘/main/mom.gif’, ‘caption’: ‘Mother’s Day’},
15: {‘thumb’: ‘/thumbnails/hyperbolic.gif’, ‘main’: ‘/main/sculpture.jpg’, ‘caption’: ‘Hyperbolic’},
16: {‘thumb’: ‘/thumbnails/religio.gif’, ‘main’: ‘/main/religio.gif’, ‘caption’: ‘Religio’},
17: {‘thumb’: ‘/thumbnails/smalllamp.jpg’, ‘main’: ‘/main/smalllamp.jpg’, ‘caption’: ‘Lamp #1 (of 3)’},
18: {‘thumb’: ‘/thumbnails/superstition.gif’, ‘main’: ‘/main/superstition.gif’, ‘caption’: ‘Superstition’},
19: {‘thumb’: ‘/thumbnails/talllamp.gif’, ‘main’: ‘/main/talllamp.jpg’, ‘caption’: ‘Lamp #3 (of 3)’},
20: {‘thumb’: ‘/thumbnails/united.gif’, ‘main’: ‘/main/united.gif’, ‘caption’: ‘United’},
21: {‘thumb’: ‘/thumbnails/weight.gif’, ‘main’: ‘/main/weight.gif’, ‘caption’: ‘Weight’},
22: {‘thumb’: ‘/thumbnails/zelda.jpg’, ‘main’: ‘/main/zelda.jpg’, ‘caption’: ‘Zelda’s Invention’}

}
};
FOTO.Slider.reload(‘default’);
FOTO.Slider.enableSlideshow(‘default’);
//enable the slideshow and build the controls
FOTO.Slider.enableSlideshow(‘default’);

//automatically play
FOTO.Slider.play(‘default’);
});
</script>

[/QUOTE]

I link to two js files, and the slideshow works great. My only problem is that I would like people to be able to click on the main image to go to a URL with further images of each piece. I’m not an expert in javascript by any means, but I can get by.

Does anyone have a suggestion that a non-expert can implement?

Thanks much for any help,
Evie

Also in #JavaScript _↴