Community Forums 

Main Content

How to change image during choose of product from drop down menu

    Jul 11 2016 08:41:40

    #1

    Tomele

    Join date : 2016-07-11      Posts : 23

    I would like that during choosing of product from the drop down menu could be changed product image too (as on ebay), that customers can know what kind of colour they have chosen and could see it in real.

    I have found a javascript, but can't integrate it. It won't work once added to drop down menu selection zone.
    Below i have added samples

    _____________
    This is original script:
    <script>
    $(document).ready(function(){
    $('#mtl').click(function(){
    $('#picture').attr('src', '/img/IMG_3493.jpg');
    });
    $('#mtl2').click(function(){
    $('#picture').attr('src', '/img/IMG_3481.jpg');
    });
    $('#mtl3').click(function(){
    $('#picture').attr('src', '/img/IMG_3417.jpg');
    });
    });
    </script>


    <div id="picture_here">
    <img src="/img/colage2.jpg" style="box-shadow: 2px 2px 2px rgb(136, 136, 136); border-radius: 5px; border: 1px solid rgb(191, 191, 191);" height="330" width="350" no_space_b="true" no_space_e="true" id="picture"/>
    </div>


    <div id="about">
    <div id="mtl">Mtl</div>
    </div>

    <div id="about">
    <div id="mtl2">Mtl3</div>
    </div>

    <div id="about">
    <div id="mtl3">Mtl2</div>
    </div>
    -----------------------
    But it wont work like this;

    <select name="product[]">

    <div id="about">
    <div id="mtl">
    <option value="+ Gold colour">
    15ml Gold Metallic
    </option>
    </div>
    </div>
    <div id="about">
    <div id="mt2">
    <option value="+ Silver colour">
    15ml Silver Metallic
    </option>
    </div>
    </div>
    <div id="about">
    <div id="mt3">
    <option value="+ Copper colour">
    15ml Copper Metallic
    </option>
    </div>
    </div>
    </select>
    ------------------------

    I would be grateful for any help.
    Thank you.



    Jul 11 2016 11:22:53

    #2

    Tomele

    Join date : 2016-07-11      Posts : 23

    Here is another one java which changes image on click:

    <script>
    $(document).ready(function(){
    $('li').click(function(){
    var imgpath = $(this).attr('dir');
    $('#image').html('<img src='+imgpath+' height='+375+' width='+348+'>');
    });
    $('.btn').click(function(){
    $('#thumbs').fadeIn(500);
    $('#image').animate({marginTop:'10px'},200);
    $(this).hide();
    $('#hide').fadeIn('slow');
    });
    $('#hide').click(function(){
    $('#thumbs').fadeOut(500,function (){
    $('#image').animate({marginTop:'50px'},200);
    });
    $(this).hide();
    $('#show').fadeIn('slow');
    });
    });
    </script>


    <div class="sandiv">
    <div class="man">
    <div id="image">
    <img src="/img/colage2.jpg" height="375" width="348"></div>
    </div>
    <div id="thumbs">
    <div class="sanr">
    <ul>
    <li dir="/img/IMG_3493.jpg">Human-body-organ-diag-6</li>
    <li dir="/img/IMG_3481.jpg">Human-body-organ-diag-7</li>
    <li dir="/img/IMG_3417.jpg">Human-body-organ-diag-8</li>
    <li dir="/img/colage2.jpg">Human-body-organ-diag-9</li>
    </ul>
    </div>
    </div>
    </div>

    --------------------
    But it won't work with <select name="product[]"> options.



    Jul 11 2016 12:32:28

    #3

    Geoff

    Join date : 2008-09-18      Posts : 415

    The scripts that you have found are jquery (server-side javascript). To use these scripts you would also need to upload and reference the associated jquery libraries.

    Below is a simple client-side javascript which will do what you need

    <form>

    <select name="product[]" onChange="document.images['pic'].src='images/'+this.options[this.selectedIndex].value+'.jpg'">
    <option value="gold" selected>15ml Gold Metallic</option>
    <option value="silver">15ml Silver Metallic</option>
    <option value="copper">15ml Copper Metallic</option>
    </select>

    </form>

    <img name="pic" src="images/gold.jpg">

    (In this example, the images would be stored in a folder named "images", and the images named as the option values)



    Jul 12 2016 05:39:08

    #4

    Tomele

    Join date : 2016-07-11      Posts : 23

    Dear Geoff,

    OMG, spent few hours to make it working. Looks, that lacked a slash in front of...... images/'+this.options[this.selectedIndex].value+'.jpg'"> )))
    Now it's working perfectly. Thanks a lot, Geoff!
    Just one thing: option values - when product added to the cart, product name has not a pleasant view, like a 15ml_Silver_Metallic_colour ...those dashes between words...
    Maybe there is another way to eliminate those dashes? Some symbols, such as +, can not be used in this case also?
    Maybe there is another way to call image by clicking without affecting the values option?

    Thank you.



    Jul 13 2016 12:57:09

    #5

    Geoff

    Join date : 2008-09-18      Posts : 415

    I would remove the underscores and just have spaces in your image filenames. Theoretically not supposed to do this but if your server accepts it and it works then I don't see a problem.



    Jul 24 2016 22:36:43

    #6

    Tomele

    Join date : 2016-07-11      Posts : 23

    OK, but how could i add a price value?

    <option value="15ml_Gold_Metallic_colour:3.00">15ml Gold Metallic - 3</option>



    Jul 25 2016 08:37:17

    #7

    GT

    Join date : 2008-09-18      Posts : 3212

    Change the select from product[] to productpr and remove any price= from the form.

    Having trouble with a form or need one building?
    Fast turnaround, but I do charge :)

    Mal's Forms / Scripts and the syntax are here.




    Jul 25 2016 09:43:50

    #8

    Tomele

    Join date : 2016-07-11      Posts : 23

    GT said Change the select from product[] to productpr and remove any price= from the form.

    In my case it wouldn't be working, as i have in use next:
    <select name="noCampers" onchange="sumFields(); document.images['pic'].src='images/'+this.options[this.selectedIndex].value+'.jpg'" oninput="sumFields();">

    I canot change name.



    Jul 25 2016 14:43:59

    #9

    GT

    Join date : 2008-09-18      Posts : 3212

    Why are you using the existing name?

    If it is for a script, get the script to use the id and use name=productpr id= noCampers

    Having trouble with a form or need one building?
    Fast turnaround, but I do charge :)

    Mal's Forms / Scripts and the syntax are here.




    Jul 25 2016 15:32:56

    #10

    Tomele

    Join date : 2016-07-11      Posts : 23

    GT said Why are you using the existing name?

    If it is for a script, get the script to use the id and use name=productpr id= noCampers


    You mean like this:
    <select name="productpr" id="noCampers" onchange="sumFields(); document.images['pic'].src='images/'+this.options[this.selectedIndex].value+'.jpg'" oninput="sumFields();">


    ------------------------------------

    Here is the full version:

    <script type="text/javascript">
    //<![CDATA[
    function submitForm() {
    /*
    When the form is submitted, these fields are tested for blanks.
    If it is ok to have a blank, then just remove that group.
    Bear in mind though that if you remove a group here, you need to remove all references
    to it in the rest of the page and to do this you would need good javascript knowledge
    so that you don't remove wrong areas of code.
    */
    if (document.myForm.noCampers.value=='') {
    alert('Please Select colour option');
    return false;
    }
    if (document.myForm.addPadding.value=='') {
    alert('Please Select agent option');
    return false;
    }
    /*
    If the above tests are all ok, then the script then creates the total
    */
    sumFields();
    }
    function sumFields() {
    /*
    The description is stored in a field called tmpDescription and like tmpPrice is built
    as the script runs through. It is then stored into the forms product field.
    */
    var tmpPrice=0;
    var tmpField=0;
    var tmpArray=new Array();
    tmpField=document.myForm.noCampers.value;
    tmpArray = tmpField.split(':');
    var tmpnoCampers=tmpArray[0];
    var tmpDescription='{b}Kit Small{/b}';

    if (document.myForm.noCampers.value>'')
    tmpField=document.myForm.noCampers.value;{
    tmpArray = tmpField.split(':');
    tmpDescription+='{br}'+tmpArray[0];
    tmpPrice+=(1*tmpArray[1]);
    }
    /*
    The following group of code (starting with if and ending with } ) is what is required for
    all your drop boxes that contain a description and a price setout in the traditional way as
    Mal's productpr field.
    Basically it first checks if the user has selected from the list and if so, runs the code.
    It splits the field into two fields around the : symbol.
    It then adds the first field ( tmpArray[0] ) to the temp field for description and adds the second
    field ( tmpArray[1] ) to the temp field for price.
    */
    if (document.myForm.addPadding.value>'') {
    tmpField=document.myForm.addPadding.value;
    tmpArray = tmpField.split(':');
    tmpDescription+='{br}'+tmpArray[0];
    tmpPrice+=(1*tmpArray[1]);
    }
    /*
    This stores the built up description to the forms product field to be compatible with
    Mal's cart
    */
    document.myForm.product.value=tmpDescription;
    /*
    This stores the built up price to the forms price field to be compatible with
    Mal's cart
    */
    document.myForm.price.value=tmpPrice;
    /*
    This updates the running total value at the bottom of the form so that the user can see
    how much they are spending before sending the data to the form
    */
    document.myForm.runningTotal.value=tmpPrice.toFixed(0);
    }
    //]]>
    </script>

    <img name="pic" src="images/No_colour.jpg" height="375" width="348">
    <br><br><br>
    <form action="http://ww#.aitsafe.com/cf/add.cfm" id="myForm" name="myForm" onsubmit="return submitForm();">
    <input name="return" value="" type="hidden">
    <input name="userid" value="" type="hidden">
    <input name="thumb" value="logo.png" type="hidden">
    <input name="product" type="hidden">
    <input name="price" type="hidden">
    <input name="noqty" value="0" type="hidden">
    <input name="qty" value="1" type="hidden">
    <p>Colour:
    <select name="productpr" id="noCampers" onchange="sumFields(); document.images['pic'].src='images/'+this.options[this.selectedIndex].value+'.jpg'" oninput="sumFields();">
    <option value="">Please Select</option>
    <option value="Gold_Metallic_colour:3.00">Gold Metallic - 3</option>
    <option value="Silver_Metallic_colour:3.00">Silver Metallic - 3.00</option>
    <option value="Copper_Metallic_colour:3.00">Copper Metallic - 3.00</option>
    <option value="Bronze_Metallic_colour:3.00">Bronze Metallic - 3.00</option>
    </select>
    </p>
    <p> Agent
    <select name="productpr" id="addPadding" onchange="sumFields();" oninput="sumFields();">
    <option value="" selected="selected">Please Select</option>
    <option value="Include agent:2.00">Include agent - 2.00</option>
    <option value="No need agent:0.00">No need agent</option>
    </select>
    </p>
    <p class="style2">Current Total: <input name="runningTotal" size="10" maxlength="10" readonly="readonly" class="runningTotal" type="text"></p>
    <p> <br/>
    <br no_space_b="true" no_space_e="true"/>
    <input name="Submit" src="https://www.paypalobjects.com/en_GB/i/btn/btn_cart_LG.gif"; no_space_b="true" no_space_e="true" border="0" type="image"/></p>
    </form>



       1   |   2      »