Announcement

Collapse
No announcement yet.

Pop ups

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    #16
    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.
    Norman - www.drillpine.biz
    Edinburgh, U K / Bitez, Turkey

    Comment


      #17
      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.
      Thanks
      Sheila

      Comment


        #18
        You can make the image clickable too:

        Try using e.g.
        Code:
        <A HREF="javascript:ShowPopUp('Backdrop1.jpg',500,600);"><img src="Backdrop1.jpg" width=100></a> White £200.00
        Norman - www.drillpine.biz
        Edinburgh, U K / Bitez, Turkey

        Comment


          #19
          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.
          Norman - www.drillpine.biz
          Edinburgh, U K / Bitez, Turkey

          Comment


            #20
            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.
            Code:
            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.
            Norman - www.drillpine.biz
            Edinburgh, U K / Bitez, Turkey

            Comment

            Working...
            X