My only issue is with the extended info popups, which I use to show an optional large image. (I wouldn't advise viewing them over dialup, if you're still in Turkey!) These remain resolutely un-dynamic, remaining on the default; main product extended info.
I have specified extended infos for all the hidden product choices, and yet none are created at all unless I specify one for the main product (containing the attribute choices).
Is it possible to specify dynamic extended info popups, as is suggested here in the DynamicProductImagesReadme
The popup code and a thumbnail image against the radio button is then created automatically.
?
Thanks for sharing your Actinic-hacking experiences, I have been your grasshopper for months now, though mostly through lurking the community.
Hello again, I'm succumbing to forum frenzy tonight, double-posting all over the place.
After further experimentation with your dynamic product image script hack, I've unearthed a few more minor issues.
-How best can we create ALT tags for our scaled images?
-Could the images be made clickable, to set the radio button and fire the image rollver?
-Alternatively, could we have the dynamic rollover effect without the scaled images?
I think I can see how some of these effects could be achieved, in fact hold on...
Yes, if I edit dynamicimagesupport.js thusly,
// START Dynamic Product Images on Radio Buttons V2.07
var current = '';
var scaledown;
var rcolcount;
var rcolpos;
var textunder;
var buttonunder;
var currentselect; // used to hold the id of the <select..> statement under construction
var isels = new Object(); // will hold SELECT items
function StartImageSelect(attribname){ // called from Act_VariantListHeader.html
currentselect = attribname; // save name of current array in global
isels[currentselect] = new Array(); // make an array for the images using unique attribute name
isels[currentselect].push(current); // current image name is 1st value
}
function EndImageSelect(){ // called from Act_VariantListFooter.html
var thissel = document.getElementById('s-' + currentselect); // the <select> statement in question
for ( i = 0; i < thissel.options.length; i++ )
{
var opt = thissel.options[i].text;
var styleval = opt.match(/(.*)\{(.*)\}(.*)/); // have we a "{" and "}" in the text?
if ( styleval != null )
{
isels[currentselect].push(styleval[2]); // save the image name
thissel.options[i].text = styleval[1] + styleval[3]; // and remove the image name from the options list
}
else
{
isels[currentselect].push(''); // null image
}
}
}
function selectimage(selthis){ // called from onchange event in the <SELECT..> statement
var thisimg = isels[selthis.name][selthis.selectedIndex + 1]; // extract the image
if ( thisimg )
{
var imgref = isels[selthis.name][0]; // 1st item has the main image name
var curbits = imgref.match(/(.*\/)(.*)/); // detect any path in swap image (in case we're previewing)
var cpath = curbits != null ? curbits[1] : ''; // null path if live
document.getElementById(imgref).src = cpath + thisimg; // and replace main image with it
}
}
function radioimage(starthtml, midhtml, choicename){ // called from Act_VariantRadioButton.html
var radiohtml = '<INPUT TYPE=RADIO NAME="' + starthtml + '"'; // recreate the basic HTML
radiohtml += ' VALUE="' + midhtml; // and the value
var radioid = 'RD-' + starthtml + choicename; // unique ID for this button
var result = choicename.match(/(.*)\{(.*)\}(.*)/); // see if HTML for Name contains {.....}
if ( result != null )
{
radiohtml += ' id="' + radioid + '" '; // set unique ID
var textsep = textunder ? '<br>' : ''; // do we want text under button
scaledown = scaledown - 0;
var twidth = Math.floor(100 / rcolcount);
rcolpos++;
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('<table width="' + twidth + '%" align=left>'); // start a table if appropriate width
document.write('<tr><td><img src="' + cpath + thisimage + '"' // first cell with image
+ ' width=' + thiswidth + ' height=' + thisheight // scaled sizes
+ ' onclick="document.getElementById(\'' + radioid + '\').checked=true;' // set appropriate radio if image clicked
+ ' document.getElementById(\'' + current + '\').src=\'' + cpath + thisimage + '\'"' // and swap big image
+ ' alt ="' + result[1] + result[3] + '"' // informative text
+ ' style="cursor:pointer"' // show that image can be clicked
+ '>');
if ( buttonunder ) // where do we want the button text
{
document.write('<br>' + radiohtml + textsep + result[1] + result[3]); // button under image
}
else
{
document.write('</td><td width="100%" valign=top>'); // new cell next to image
document.write(radiohtml + textsep + result[1] + result[3]); // then radio button and description
}
document.write('</td></tr></table>'); // finally end table
if ( rcolpos >= rcolcount )
{
document.write('<br clear=all>');
rcolpos = 0;
}
}
else
{
result = choicename.match(/(.*)\[(.*)\](.*)/); // see if HTML for Name contains [.....]
if ( result != null )
{
radiohtml += ' id="' + radioid + '" '; // set unique ID
var textsep = textunder ? '<br>' : ''; // do we want text under button
var twidth = Math.floor(100 / rcolcount);
rcolpos++;
var cpath = '';
var curbits = current.match(/(.*\/)(.*)/);
if ( curbits != null ) cpath = curbits[1];
var thisimage = result[2]; // the text within [ ]
radiohtml += '>';
document.write('<table width="' + twidth + '%" align=left>'); // start a table if appropriate width
document.write('<tr><td><img src="' + cpath + thisimage + '"' // first cell with image
+ ' onclick="document.getElementById(\'' + radioid + '\').checked=true;"' // set appropriate radio if image clicked
+ ' alt ="' + result[1] + result[3] + '"' // informative text
+ ' style="cursor:pointer"' // show that image can be clicked
+ '>');
if ( buttonunder ) // where do we want the button text
{
document.write('<br>' + radiohtml + textsep + result[1] + result[3]); // button under image
}
else
{
document.write('</td><td width="100%" valign=top>'); // new cell next to image
document.write(radiohtml + textsep + result[1] + result[3]); // then radio button and description
}
document.write('</td></tr></table>'); // finally end table
if ( rcolpos >= rcolcount )
{
document.write('<br clear=all>');
rcolpos = 0;
}
}
else // no brackets of any kind
{
document.write(radiohtml + '>' + choicename); // so write the unaltered choice text
}
}
}
// (V11) END Dynamic Product Images on Radio Buttons