Question

I have 3 color fields… for example.

• Color
• Finish
• Highlights

Now when a user clicks the “Color” the image changes according to the color. When the user clicks “Finish” the finish changes, and the Color selection stays as they have chosen.. and so on.

I am trying to accomplish this in jQuery. I’m thinking of having a naming convention with the products.. something along the lines of “Product_Color_Finish_Highlights.jpg” then I would change the appropriate ‘piece’ of the filename in conjunction with the selection made. Then send the new filename as the ‘src’ of the ‘target_image’

I have written a few things like accordion menus, and other simple things, but nothing where I would need to change the source of the image. I have been reading now for a couple days, and just unable to wrap my head around a good starting point, or ‘plan of attack’ for this.

I don’t think I need to much help with the actual jQuery, but just rather.. where to begin?
How do I attack this?

Answer 1

Start with this:

$('#your-image-selector').attr('src', 'product_color_finish_or_whatever.jpg');

Or, clarify a bit what you need and you’ll get more specific help.

Entering guess mode. You hinted at something more conventions based. Suppose you had the following markup, possibly generated by a script:

<div id="pickers">
  <select id="color">
    <option value="blue">
  </select>
  <img id="color-swatch"/>

  <select id="finish">
    <option value="blue">
  </select>
  <img id="finish-swatch"/>

  <select id="highlights">
    <option value="blue">
  </select>
  <img id="highlights-swatch"/>

You could drive the img src tags with this:

$('#pickers > select').bind('load change', function(){
  $(this).next().attr('src', 'Product_' + $(this).val() + '.jpg');
});

That doesn’t require any specific classes or IDs on anything–just that the selects be next to the imgs and that the img filename include the value from the picker.

What’s that? You don’t want your images adjacent to the pickers? OK then, link the two together with the id convention of picker-id whatever and related image-id of whatever--swatch. Then this code will work:

$('#pickers > select').bind('load change', function(){
  $('#' + $(this).attr('id') + '-swatch')
    .attr('src', 'Product_' + $(this).val() + '.jpg');
});

This should use that convention to find the image and update its src.

None of these code samples has been tested but they should inspire something that works.