How to swap images when clicking on a button?

I hope you can help me with this here:

I do have a website with several different vehicle brands and models, where I implemented a jQuery reel plugin to show the available color options for each model. I am calling the reel like this:



The script:


[[*reelimage]] is tied to each vehicle model and is being uploaded in the template variable section.

So far, so good, but now the problem I am running into:
For each model I will have different colors available, which will be shown with circles tinted in those colors below the reel image. Here is a demo:
http://grenadamcintyrebros.com/modx/index.php?id=31

How can I manage to make those circles into buttons, that "swap" the reel images, depending on each model?

I hope I have expressed what I want to achieve understandably...?

Thanks in advance,
Belinda

Have each "reel" in a container with its own ID, such as <div id="AlabasterSilver"> and <div id="CrystalBlackPearl">. Show/hide the div on button click. Since you'll have more than one of these in the DOM you'll need to use addClass when you show them and removeClass when you hide them, and use a class .colorimage instead of id #colorimage to trigger the slider.

Another thing, always validate your page before getting into any heavy Javascript workings. A stray </p> tag can work havoc with the Javascript when it's trying to parse the DOM. [ed. note: sottwell last edited this post 12 years, 11 months ago.]