Dynamic changing of product image when a radio choice is selected.
In addition a scaled thumbnail of the alternative image is placed against the radio item.
To use this all you need to do is to place the supplementary image name in the choices
HTML for Name field within curly brackets. E.g. Blue{widget_blue.jpg}
The popup code and a thumbnail image against the radio button is then created automatically.
Alternatively you can have a small unscaled icon placed against the radio buttons with a
normal single product image.
To use this all you need to do is to place the icons image name in the choices
HTML for Name field within square brackets. E.g. Blue[widget_blue.jpg]
Updated 04-01-04 to allow for alternative layouts and small non-swapping icons.
Updated 24-12-03 to allow for multiple items per line.
Author Norman Rouxel rouxel@attglobal.net
SETUP
Add the following code to Act_Primary.html (just above the tag).
Make a file in Site1 called dynamicimagesupport.js from the following:-
// START Dynamic Product Images on Radio Buttons
var current = '';
var scaledown;
var colcount;
var colpos;
var textunder;
var buttonunder;
function radioimage(radiohtml, choicename){
var result = choicename.match(/(.*)\{(.*)\}(.*)/); // see if HTML for Name contains {.....}
if ( result != null )
{
var textsep = textunder ? '
' : ''; // do we want text under button
scaledown = scaledown - 0;
var twidth = Math.floor(100 / colcount);
colpos++;
if ( isNaN(scaledown) || scaledown < 1 ) scaledown = 4; // set a default if bad scaledown
var cpath = '';
var curbits = current.match(/(.*\/)(.*)/); // if we're previewing
if ( curbits != null ) cpath = curbits[1]; // then get path to main image
var thisimage = result[2]; // the text within { }
// add in image substitution code
radiohtml += ' onClick="document.getElementById(\'' + current + '\').src=\'' + cpath + thisimage + '\'">';
var thiswidth = Math.floor(iwidth.replace(/WIDTH=(.*)/,"$1") / scaledown); // the width
var thisheight = Math.floor(iheight.replace(/HEIGHT=(.*)/,"$1") / scaledown); // the height
document.write('
');
if ( buttonunder ) // where do we want the button text
{
document.write(' ' + radiohtml + textsep + result[1] + result[3]); // button under image } else { document.write(' | '); // new cell next to image document.write(radiohtml + textsep + result[1] + result[3]); // then radio button and description } document.write(' |
'); // first cell with image
if ( buttonunder ) // where do we want the button text
{
document.write(' ' + radiohtml + textsep + result[1] + result[3]); // button under image } else { document.write(' | '); // new cell next to image document.write(radiohtml + textsep + result[1] + result[3]); // then radio button and description } document.write(' |