Dynamic changing of the product image when a radio choice or drop down list 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 28-09-03 Amended Radio code for more efficiency. Files Changed:- dynamicimagesupport.js, Act_VariantRadioButton.html Updated 27-09-04 rewrite of SELECT code. Files changed:- dynamicimagesupport.js, Act_VariantListHeader.html, Act_VariantListChoice.html, Act_VariantListFooter.html Updated 25-09-04 amended to allow for images within SELECT list options 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 - www.drillpine.biz 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 // 27-09-04 Removed redundant code (cprodref, selcode) // 26-09-04 Rewrite of SELECT code to minimise page size // 25-09-04 amended to allow for images within SELECT list options var current = ''; var scaledown; var colcount; var colpos; var textunder; var buttonunder; var currentselect; // used to hold the id of the statement under construction function selectimage(attrib, index){ // called from onchange event in the statement var imgref = eval(attrib + '[0]'); // 1st item has the main image name var thisimg = eval(attrib + '[' + (index + 1) + ']') if ( thisimg ) document.getElementById(imgref).src = thisimg; } function StartImageSelect(attribname){ // called from Act_VariantListHeader.html eval(attribname + ' = new Array();'); // make an array for the images using unique attribute name currentselect = attribname; // save name of current array eval('var thisarray = ' + currentselect); thisarray.push(current); // current image name is 1st value } function EndImageSelect(){ // called from Act_VariantListFooter.html var thissel = document.getElementById(currentselect); // the ' : ''; // 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 ( curbits != null ) cpath = curbits[1]; 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(''); // start a table if appropriate width 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('
'); // finally end table if ( colpos >= colcount ) { document.write('
'); colpos = 0; } } else { result = choicename.match(/(.*)\[(.*)\](.*)/); // see if HTML for Name contains [.....] if ( result != null ) { var textsep = textunder ? '
' : ''; // do we want text under button var twidth = Math.floor(100 / colcount); colpos++; var cpath = ''; var curbits = current.match(/(.*\/)(.*)/); if ( curbits != null ) cpath = curbits[1]; var thisimage = result[2]; // the text within [ ] radiohtml += '>'; document.write(''); // start a table if appropriate width 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('
'); // finally end table if ( colpos >= colcount ) { document.write('
'); colpos = 0; } } else // no brackets of any kind { document.write(radiohtml + '>' + choicename); // so write the unaltered choice text } } } // END Dynamic Product Images on Radio Buttons Replace Act_ProductImage.html (in Site1) with the following NETQUOTEVAR:ALTERNATETEXT Replace Act_VariantListHeader.html (in Site1) with the following Replace Act_VariantRadioButton.html (in Site1) with the following In all Product Templates you intend to use with such products add the following code after every occurrence of the line NETQUOTEVAR:PRODUCTFORMBEGIN In Actinic / Advanced / Custom Properties click the "+" sign and create a variable called ICONSCALE. Again click the "+" sign and create a variable called ICONSPERLINE. Again click the "+" sign and create a variable called BUTTONUNDER. Again click the "+" sign and create a variable called TEXTUNDER. Go to Design / Options / Site Defaults / Properties. Click the "+" sign and select ICONSCALE. Set it's Value to 5 (for one-fifth size icons - or whatever scale down factor you want). If using Business uncheck Searchable and check Use as CUSTOMVAR. Click the "+" sign and select ICONSPERLINE. Set it's Value to 1 (for one icon per line - or whatever number across that you want). If using Business uncheck Searchable and check Use as CUSTOMVAR. Click the "+" sign and select BUTTONUNDER. If you want the Radio Button (and Choice name) under the image then set it's Value to 1. If you want the Radio Button to the right of the image set it's value to 0. If using Business uncheck Searchable and check Use as CUSTOMVAR. Click the "+" sign and select TEXTUNDER. If you want the Choice name under the Radio Button then set it's Value to 1. If you want the Choice name to the right of the Radio Button set it's value to 0. If using Business uncheck Searchable and check Use as CUSTOMVAR. Go to Design / Options / Shop Defaults and clear "Default Product Image" (or if you need such an image put it in the same place as your icons and reselect it). This allows icons to be previewed reliably. That's setup done. OPERATION When you have a product that you want to replace the image depending on a radio button selection do the following. Set the product to use the image that corresponds to the 1st choice. For each choice in the HTML for Name field add the image file name within "{" and "}" (leave out any path name, it will be deduced from the path to the main product image) e.g. Main Product uses Images\widget_blue.jpg You have an Attribute called Colour Choice 1 uses Blue{widget_blue.jpg} Choice 2 uses Green{widget_green.jpg} Choice 3 uses Yellow{widget_yellow.jpg} etc. Save these additional images in the same place as the main product image. Make sure that these additional images are loaded via Advanced / Additional Files. (I've not been able to find a way to persuade Actinic to automatically upload these) Alternatively if you just want small unscaled icons that don't swap the main image against each radio button then do as above but use square brackets "[" and "]" instead of the curly ones. These icons should be put in the same place as the main product image (or the Default Product Image) if you don't have a main image for a product. That's that. NOTES. The code works in Preview and on Live sites. All images should be the same size. If you don't have an image for a choice I'd recommend you use a dummy blank image. You can't use the same main image (as a main image) more than once on a page. If you want more than one of the same image copy it to a new unique name and use that for the next products main image. There's no restriction on the select images. The scale down factor for the radio button icon can be set by changing Custom Property ICONSCALE (if using Business remember to uncheck Searchable and check Use as CUSTOMVAR) at either the Catalog, Section or Product levels. The number of these choices across the page can be changed via the Custom Property ICONSPERLINE (if using Business remember to uncheck Searchable and check Use as CUSTOMVAR) at either the Catalog, Section or Product levels. Also you can change the radio button position via BUTTONUNDER and text position via TEXTUNDER. at either the Catalog, Section or Product levels. (if using Business remember to uncheck Searchable and check Use as CUSTOMVAR) LAYOUT Because of the way radio buttons are created by Actinic there is no way to detect when the last one has been generated. If you display these buttons in columns and the final row isn't full then the next attribute name may be displayed in the remaining position. A work-around for this is to change Act_VariantAttributeName.html to be:-
NETQUOTEVAR:ATTRIBUTENAME
as this will allow further attributes to line up better. Alternatively you can put "
" into the User Defined Separator field of the Attribute that uses these buttons. Tested with IE6, Netscape 7 and Opera 7.