Adding image swaps to my page, i f**d up once and dont want to again

i am going to add thumbnail images on the right side of this page

like found on this page

also i am going to give the arrows the ability to navigate through the images


i asked for advice in a different forum and was told that the image swaps i have in ggallen.html should not be inline as it clogs up the page…makes sense. i would like to know the best way to add the image swap function, or whatever is best for the job, to the thumbnails. also i would guess there is a more concise way of achieving the navigational behavior for the arrows than making separate divs which are shown/ hid on click.

i would really appreciate any responses, and that they not be pastings of reworked ggallen.html code as it drives me crazy.

thanks for the help
p.s. all this behavior on click not mouse over

perhaps it s obvious but what would the external javascript page(.js?) look like for this function?