Announcement

Collapse
No announcement yet.

Dynamic Product Image JS for dropdown menu

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
    #1

    Dynamic Product Image JS for dropdown menu

    Hi,

    I know that Norman has a patch on this topic, but i would like to keep it simple, as far as possible. So i had made a simple js to do the swapping of images of the product.

    But i have some problem/doubt.
    1) it is hard coded for a product on a page, so im currently having a problem or rather, i would not know how to merge it into the templates.

    2) as i have more than one product in the same page, is it possible have the swapping done on the first product while the rest of the products were using normal display images.

    attached is the js i made.

    anyone can help or give advice on this?
    thanks in advance
    Attached Files
    Tags: None
    #2
    Yong,

    I like the workaround, as you said simple !!

    What you will need to do is to put the script bits into the templates as detailed below...

    Open Act_Primary.html and stick in

    <SCRIPT LANGUAGE="JavaScript">
    <!-- Hide from old browsers


    image1= new Image();
    image1.src = "1.jpg";
    image2= new Image();
    image2.src = "2.jpg";
    image3= new Image();
    image3.src = "3.jpg";
    image4= new Image();
    image4.src = "4.jpg";

    function imgchange(){
    var imageNum = document.form.selImage.selectedIndex + 1;
    fname = eval("image" + imageNum + ".src")
    document.img.src = fname
    }
    //-->
    </SCRIPT>

    Within the <HEAD> </HEAD> tags...

    Then Open Act_ProductLine.html and rename it as Act_ProductLineSwap.html, In this template you will see this bit at the start..

    NETQUOTEVAR:INCLUDE Act_ProductSeparator.html
    NETQUOTEVAR:ENDSEPARATOR
    NETQUOTEVAR:PRODUCTFORMBEGIN
    <tr>
    <td rowspan="2" valign="TOP" align="CENTER"> NETQUOTEVAR:TEMPLATEBEGINXML NETQUOTEVAR:PRODUCTIMAGE </td>

    Change this to look like this ...

    NETQUOTEVAR:INCLUDE Act_ProductSeparator.html
    NETQUOTEVAR:ENDSEPARATOR

    <tr>
    <td rowspan="2" valign="TOP" align="CENTER"> NETQUOTEVAR:TEMPLATEBEGINXML <!--NETQUOTEVAR:PRODUCTIMAGE-->
    <IMG SRC="1.jpg" NAME="img">
    <FORM name="form">
    <SELECT NAME="selImage" onChange="imgchange()">
    <OPTION>Image 1
    <OPTION>Image 2
    <OPTION>Image 3
    <OPTION>Image 4
    </SELECT>
    </FORM>
    NETQUOTEVAR:PRODUCTFORMBEGIN
    </td>


    You will have to comment out NETQUOTEVAR:PRODUCTIMAGE as you are using a direct reference for the image. Another very important thing to note is that the ProductLine template does not support nested Forms, you will notice that I have moved the inbuilt NETQUOTEVAR:PRODUCTFORMBEGIN to appear after your closing form tag.

    On the product where you wish the changes to appear, go to the layout tab and against Product Layout, click on select and browse to your new template and apply.

    Works rather neatly.

    Kind regards,
    Bruce King
    SellerDeck

    Comment

      #3
      Hi Bruce,

      thanks for the reply
      but it doesnt seem to work the way i wanted it to be...

      well at least u've paved the road for me,
      i'll try work around abit first

      regards
      Yong

      Comment

      Previous template Next
      Working...
      X