Pop ups

[NormanRouxel]

On the left hand product tree in Actinic, go to these products and expand then until you see the choices (coloured "123" icons) click each choice and you should see the code in the HTML for name field on the Choice Details window on the right.

Just move the <img..... > bit to the beginning of that line.

[Sheila]

I moved the code as suggested and it looks much better thanks.

I have also taken your pop up code and implemented against the backdrop choices. It's great! Just what I needed. I was trying to figure out a way for customers to be able to see the backdrop pictures clearly without resorting to posting a message asking the user to go to the backdrop section to look at the pictures and details. Thank you!!! Now they just click on the view button to see a pop up.

[NormanRouxel]

You can make the image clickable too:

Try using e.g.

<A HREF="javascript:ShowPopUp('Backdrop1.jpg',500,600);"><img src="Backdrop1.jpg" width=100></a> White £200.00

[NormanRouxel]

And if you resize all these popup images to be 500 pixels wide, they'll be small enough to use for both the icon and the popup.

This means that the big image will already be in the browsers cache and the popup will work instantly.

[NormanRouxel]

And if you're feeling adventurous, here's way to automate all that so all you have to do is put

[Backdrop1.jpg] White £200

into the HTML for name field and everything else will be automatically generated.

Simple popup image against radio buttons.

This adds an icon to a radio button if the HTML for name field contains [image.jpg],
i.e. an image name withing square brackets.
In addition clicking the icon will open a popup page showing it full sized.


INSTALLATION


Put this in Act_Primary.html just above the "</head>" line


<script language=JavaScript>
<!--
function popupimage(choicename){	// called from Act_VariantRadioButton.html

  var iconwidth = 100;			// Width of image against button. Change to suit
  var popupwidth = 500;			// Width of popup page.  Change to suit
  var popupheight = 600			// Height of popup page.  Change these to suit;

  var prefix = '';
  if ( location.href.indexOf('PreviewHTML') > -1 ) prefix = '../';  // allow previews  
  result = choicename.match(/(.*)\[(.*)\](.*)/);   // see if HTML for Name contains [.....]

  if ( result != null )
     {
     var thisimage = result[2];      		  // the text within [ ]
     document.write(result[1]
                  + '<a href="javascript:ShowPopUp(\'' + prefix + thisimage + '\',' + popupwidth + ',' + popupheight + ')">'
                  + '<img src="' + prefix + thisimage + '" width="' + iconwidth + '"></a>'
                  + result[3]);
     }
  else
     {
     document.write(choicename);
     }
}
//-->
</script>




Replace Act_VariantRadioButton.html with



<!-- VariantRadioButton HTML begin -->
<!-- This template is used for a product variant radio button. -->

<SPAN CLASS="actxsmall">
<INPUT TYPE=RADIO NAME="NETQUOTEVAR:ATTRIBUTEREF" VALUE="NETQUOTEVAR:CHOICESELVALUE" NETQUOTEVAR:RADIOCHECKED> 
<script language=JavaScript>
<!--
 popupimage('NETQUOTEVAR:CHOICENAME');
//-->
</script>
<noscript>NETQUOTEVAR:CHOICENAME</noscript>
</SPAN>

<!-- This template is used for a product variant radio button. -->
<!-- VariantRadioButton HTML end -->


OPERATION


Make your images a maximum of 500 pixels wide or 600 pixels high.

Now whenever you want an icon and popup bigger image set the Choices HTML for Name field to be

prefix text[image.jpg]suffix text

And the code will be automatically generated.  
Prefix text and suffix text are optional.



NOTES

Keep these extra images in Site1.
You will need to upload these extra images via Advanced / Additional files.