Question

I’m going to create a colour picker for a product. I have 12 colour options and hence 12 photographs to display.

I’d like it to look like this Flash page:

http://www.renault.co.uk/cars/model/newmeganehatch/colourselector.aspx

I would much prefer to use jQuery though.

I’m thinking of using row of divs to contain the colours and invoking a change of image in the main picture-container div on colour click.

Would I be better off stacking the images and using display:none or would it be better to use a plugin such as jQuery cycle?

Thanks in advance.

EDITED TO SHOW CODE TO DATE:

<!--The color picker div-->
<div class="picker p1" data-bkgnd="images/1.jpg"></div>
<div class="picker p2" data-bkgnd="images/2.jpg"></div>
<div class="picker p3" data-bkgnd="images/3.jpg"></div>

<!--The container for the product image-->
<div class="productdisplay"></div>

    <script type="text/javascript">
     $(document).ready(function(){
       $(".picker").click(function(){

           //Load background string from data of clicked element
           var bVal = $(this).data('bkgnd');

           //Set display's background to retrieved background string
           $(".productdisplay").hide('fade').css({'background-image': "url('" + bVal + "')"}).show('fade');
       });
     });
    </script>

and the CSS

.productdisplay {
height:327px;
width:590px;
float:left;
background-image:url('images/1.jpg');
}
.picker {
height:50px;
width:50px;
float:left;
}
.p1 {
background:#FFF;
}
.p2 {
background:#C4C9C5;
}
.p3 {
background:#988879;
}

Currently getting ‘Undefined’ as the URL when loading the bVal data into the div, can’t see why.

Answer 1

Something like this could get you started:

//The color picker div    
<div class="picker" data-bkgnd="/content/images/someimg.jpg"></div>

//The container for your product image
<div class="productDisplay"></div>

<script type="text/javascript">


 $(document).ready(function(){
   $(".picker").click(function(){       
       //Load background string from data of clicked element
       var bVal = $(this).attr('data-bkgnd');
       //Set display's background to retrieved background string
       $(".productDisplay").hide().css({'background-image': "url(" + bVal + ")"}).show();
   });
 });

</script>

Click here to view the fiddle