Dynamic Images and Extended info popups.

Images added to each Choice. Images displayed as scaled down icons. Main image swaps when the Choice is selected.
Post Reply
dougselby
Posts: 3
Joined: Mon May 29, 2006 5:06 pm

Dynamic Images and Extended info popups.

Post 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. :wink:
dougselby
Posts: 3
Joined: Mon May 29, 2006 5:06 pm

Post by dougselby »

Hello again, I'm succumbing to forum frenzy tonight, double-posting all over the place. :lol:
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,

Code: Select all

<img alt ="' + result[3] + '"
then I get ALT tags, at least when HTML For Name is plain text.
Any other ideas?
norman
Site Admin
Posts: 1248
Joined: Sat Feb 07, 2004 9:55 pm

Post 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
Norman
Post Reply