Page 1 of 1
Dynamic Images and Extended info popups.
Posted: Mon May 29, 2006 5:53 pm
by dougselby
Hello Norman,
I have just installed a test run of your Dynamic Product Images javascript solution for Actinic Catalog(ue!)
http://www.dulcieangel.co.uk/acatalog/S ... Pins_.html and I'm very impressed.
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.
Posted: Mon May 29, 2006 10:26 pm
by dougselby
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,
then I get ALT tags, at least when HTML For Name is plain text.
Any other ideas?
Posted: Mon May 29, 2006 11:16 pm
by norman
Regarding the ALT tags
Code: Select all
<img alt ="' + result[1] + result[3] + '"
would be better (the {image.jpg} bit can be anywhere in the HTML for Name).
Re Popups. This would be very hard. Hidden products aren't related to any other so there's no way to know what URL's to pop-up.
Re Image switching Radio buttons when the image is clicked. This can be done. Try this alternative dynamicimagesupport.js - tested with V7.0.4.
Code: Select all
// 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