Results 1 to 8 of 8
  1. #1
    Join Date
    Jan 2011
    Posts
    22
    Plugin Contributions
    0

    Default Drop down changing main image background

    Hi All,

    i am a noob at Zencart and have been trying to figure this problem out for about a month. i am trying to change the background image behind the main image on my product page. see link http://jimpicot.com/shop/index.php?m...&products_id=3 what i want to do is when the frame is selected change the image behind the main product image. similar to this site http://www.jaspaljandu.com/gallery/p...e&gallery_ID=2 i am getting stuck with the onChange. Can someone tell me where i need to put this so it is in the source code?

    secondly does anyone know who i can underlay the image behind the main one?

    thanks in advance

  2. #2
    Join Date
    Jan 2011
    Posts
    22
    Plugin Contributions
    0

    Default Re: Drop down changing main image background

    ok so i got the onchange to appear in the source code how ever now it is the same onchange for each attribute. how can i have two different onchange's and one attribute with out an onchange. Can i do this through a if statement in the javacode?

    Code:
    <div class="wrapperAttribsOptions">
    <h4 class="optionName back"><label class="attribsSelect" for="attrib-2">Size</label></h4>
    <div class="back">
    <select name="id[2]"  onchange="jumpframe(this);" id="attrib-2">
      <option value="15">30&quot;</option>
    
      <option value="16">40&quot;</option>
      <option value="17">50&quot;</option>
      <option value="18">60&quot;</option>
      <option value="19">75&quot;</option>
    </select>
    
    </div>
    </div>
    
    
    
    
    <br class="clearBoth" />
    
    <div class="wrapperAttribsOptions">
    <h4 class="optionName back"><label class="attribsSelect" for="attrib-1">Frame</label></h4>
    <div class="back">
    <select name="id[1]"  onchange="jumpframe(this);" id="attrib-1">
      <option value="1">Canvas</option>
      <option value="2">Contemporary Timber</option>
    
      <option value="3">Contempary Mocha</option>
      <option value="4">Contempary Black</option>
      <option value="5">Timber Classic</option>
      <option value="6">Timber Gold</option>
      <option value="7">Aluminium Pewter</option>
      <option value="8">Aluminium Chrome</option>
    
      <option value="9">Aluminium Black</option>
      <option value="10">Aluminium Gold</option>
      <option value="11">Brushed Silver</option>
    </select>
    
    </div>
    </div>
    
    
    
    
    <br class="clearBoth" />
    
    <div class="wrapperAttribsOptions">
    <h4 class="optionName back"><label class="attribsSelect" for="attrib-3">Mat</label></h4>
    <div class="back">
    <select name="id[3]"  onchange="jumpframe(this);" id="attrib-3">
      <option value="12">White</option>
      <option value="13">Black</option>
      <option value="14">Cream</option>
    
    </select>
    <script type="text/javascript">
    selectFrame(9);
    selectMat(2);

    currentFrame = "1";
    currentMat = "12";

    function swapframe(imgref) {
    bgfile = 'url(../../../x_frames/' + imgref + '.jpg)';
    document.getElementById("frameimage").style.backgroundImage = bgfile;
    }
    function jumpframe(ref) {
    if (ref.value == "1") {
    document.choice.userMat.disabled=true;
    document.choice.userMount.disabled=true;
    document.getElementById("userMat").style.color = '#323232';
    document.getElementById("userMount").style.color = '#323232';
    globalFramed = false;
    } else {
    document.choice.userMat.disabled=false;
    document.choice.userMount.disabled=false;
    document.getElementById("userMat").style.color = '#ffffff';
    document.getElementById("userMount").style.color = '#ffffff';
    globalFramed = true;
    }
    currentFrame = ref.value
    newref = currentFrame + "-" + currentMat;
    swapframe(newref);
    }
    function jumpmat(ref) {
    currentMat = (ref.value);
    newref = currentFrame + "-" + currentMat;
    swapframe(newref);
    }
    &nbsp;

    </script>
    Link to site is below
    http://jimpicot.com/shop/index.php?m...&products_id=3

  3. #3
    Join Date
    Jan 2011
    Posts
    22
    Plugin Contributions
    0

    Default Re: Drop down changing main image background

    ok so development in the problem.

    i have gotten the frame image partially on screen. see http://jimpicot.com/shop/index.php?m...&products_id=3 i set the product image in a <b> class(not sure of what it is called) then set that class a background image over ever i cant seem to move the image up any further then where it is currently. any idea's? also the onchange doesnt seem to be changing when a attribute is selected from the drop down.

    Thanks,

  4. #4
    Join Date
    Jan 2011
    Posts
    22
    Plugin Contributions
    0

    Default Re: Drop down changing main image background

    Further development:
    i have gotten the product image to overlay over the frame. but now i just cant get the onchange to work please if anyone see this help me out. i have two different types of images portrait and landscape so the image id changes depending on the size of the image so that the landscape frame wont be used on a portrait image.

    anyhelp??

    anyone out there?

  5. #5
    Join Date
    Feb 2011
    Posts
    5
    Plugin Contributions
    0

    application error Re: Drop down changing main image background

    Hello!

    azzoor, i was checking the website (http://jimpicot.com/shop/index.php?m...&products_id=3)

    and i see that you have done something that I am trying so hard to do, but i could not get it.....I need your help.

    When you change the SIZE the PRICE change too, can you tell me how you did that?

    Thanks in advance!

  6. #6
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Drop down changing main image background

    Try Chrome's Dynamic Price Updater mod in Free Addons.

    azzoor, I think there are more people here who know PHP than javascript. You might try some js forums.
    Last edited by gjh42; 24 Feb 2011 at 06:54 PM.

  7. #7
    Join Date
    Feb 2011
    Posts
    5
    Plugin Contributions
    0

    Default Re: Drop down changing main image background

    gjh42, thank you very much... I am trying to implement this. I will let you know if i get.

  8. #8
    Join Date
    Jan 2011
    Posts
    22
    Plugin Contributions
    0

    Default Re: Drop down changing main image background

    thanks, i am still on struggle street with this. do you know how u would set the path to the images folder? at the moment in the javascript i have images/frames/1-12.jpg but not sure if this directory is right. its so hard not being to determine the real time values to. would be good if i could use nslog or printf to print the value to the screen least then i could troubleshoot

 

 

Similar Threads

  1. v150 Country drop down background and forn are both white
    By vinayag79 in forum Templates, Stylesheets, Page Layout
    Replies: 5
    Last Post: 12 Feb 2012, 04:28 PM
  2. Changing Mr & Ms to drop down
    By adb34 in forum General Questions
    Replies: 7
    Last Post: 16 May 2011, 02:37 PM
  3. Changing background colors on drop down menus
    By jeremy0203 in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 27 Sep 2010, 04:07 AM
  4. Drop down list background colors ??
    By Zukotaz in forum Setting Up Categories, Products, Attributes
    Replies: 7
    Last Post: 18 Jul 2008, 04:17 AM
  5. Background colour of drop-down boxes
    By Tanzanite in forum Templates, Stylesheets, Page Layout
    Replies: 4
    Last Post: 18 Dec 2006, 10:18 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR