galleriffic jquery plug-in customization.
I have installed the gallerific plug-in into my site, and it works perfectly.
(http://www.twospy.com/galleriffic/)
However I am trying to customize it. I am using it as part of a shopping cart to show product images, and I have a dropdown box on the page to select color of each product.
I need the gallerific gallery to react to the drop down menu (onchange?) and switch to the correct image.
Within the jquery.gallerific.js file there is this code that controls the gallery. It basically says whichever thumbnail you click, make that image appear large in the gallery.
- gotoImage: function(hash) {
var imageData = $.galleriffic.getImage(hash);
if (!imageData)
return false;
var gallery = imageData.gallery;
gallery.gotoImage(imageData);
return true;
},
I can alter that code to control exactly which image shows (no matter which thumbnail is clicked by changing that to:
- gotoImage: function(hash) {
var imageData = $.galleriffic.getImage(hash);
if (!imageData)
return false;
var gallery = imageData.gallery;
//gallery.gotoImage(imageData);
gallery.gotoIndex(3, false, true);
return true;
},
The bold 3 representing the hard coded value for the image I want to bring up.
So now it comes down to how to I call this function, or a similar function that would pass a variable from the values of the drop down menu...
- <select name="amount">
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
</select>
?
Thank you in advance!
Jordan