Jquery/Java Script: Customise an Image/Avatar by chainging options (e.g. Shape, Colour)

Question

Lots of websites let you customize an image by changing options.

For example, this Barbie website lets you create your own Barbie doll. You can click on various hairstyles and clothes and the main image updates while you click.

Other clothes websites do similar things.

Are there any tutorials that show you how to do this with Java Script or Jquery?

Ideally, I am looking for something templates that lets you re-use the code for different situations.

I have found a couple of tutorials but they all use PHP: Bokehman - This website says it uses Javascript, but it actually uses PHP Code Canyon - This script is templated to easily swap out elements, but again uses PHP.

I know that Javascript really doesn't support writing files so you would have to use a PHP solution to save the image. However, I am just looking for something to create the image. At this stage, I'm not bothered about the saving.

Answer 1

This is how I did it in the end.

1) Create a separate CSS classes for each asset.

Concatenate classes for assets that are made up of multiple variables. Create a .input parent class to display image assets for the selection form. Create a .preview child class to display image assets on the finished avatar

e.g.

.skin-brown .preview .preview-body {
background-image(<<image-asset>>);
}

.input .input-skin-brown {
background-image(<<image-asset>>);
}

.input .input-hair-style-1 {
background-image(<<image-asset>>);
}


.hair-style-1.hair-colour-black .preview .preview-hair {
background-image(<<image-asset>>);
}

2) Create HTML. Assign default asset options to the wrapper element.

e.g.

<div id="wrapper" class="hair-style-1 hair-colour-black skin-brown">

<div class="inputs">
Put your input FORM here. Use a HTML form element.
</div>


<div class="preview">
The finished avatar goes here.
<div class="preview-hair"></div>
<div class="preview-eyes"></div>
<div class="preview-body"></div>
</div>

</div>

3) Use Jquery to manipulate the classes on the wrapper when the options in the input form have been clicked.

e.g if user clicks on hair-style-2, the hair-style-1 class in the wrapper will be changed to hair-style-2

I have a separate question about this: jQuery: Swap Classes based on Class position

That's essentially all there is to it. Once you have the css classes written and the Jquery code to switch the classes working, it is actually very straightforward. Because you a storing all the inputs as a form, you can send the values to another process when the user clicks submit.

Tips:

1) Use SASS/SCSS to write the css. You can create an array and loop through it in sass which makes it easy to maintain the css. I have a question about this here: Sass: Using two @each lists in SCSS CSS - SASS: Using @each based mixins to generate multiple backgrounds

2) Avoid using a CSS sprite. Although sprites help greatly with load times, I think you will go crazy trying to maintain it (depending on the assets that are involved). There are tools to maintain it for you, but because this is an edge case, I don't think the tools work that well.

3) Load Speeds are an issue When the user clicks on an avatar element, there is a short delay while the CSS loads. This is a problem, as the user thinks their click hasn't registered. To get around this, create a hidden div, which uses display:none. Then use the CSS3 multiple background property to attach every asset to this DIV (as a background). This way, all your assets will load at the start, so there won't be a delay when the user clicks. Again, use SASS loops and arrays for this, as the array will automatically add all your assets to the hidden DIV.

4) Think very carefully about class and asset names. I originally went for friendly names (e.g. haircolourblack, hairstylebob) as I thought it would be easier to make sense of the code. However, in hindsight, I wish I had gone for numbered names (haircolour1, hairstyle1) as things can get tricky if your assets change (Plus using numbers make it easy to maintain code against multiple avatars). Again, use SASS arrays to cut down on the maintenance of this.

5) Use Class prefixes (e.g. .preview .preview-eye instead of .preview .eye or .preview .preview-hair-style instead of .preview .hair ). The reason for this is that a lot of the names are very generic and will probably be used in multiple places on the page (e.g. for both .preview and .input sections). If you use prefixes, it is easier to target specific classes. Plus you can use [class*="preview-"] or [class*="input-"] to target all members of a prefix, without having to litter your code with lots of shared classes (e.g. [class*="-hair-"] will get all hair elements without needing a separate hair class applied to each hair element.

6) Consider SVG If you use SVG for your image assets, you can keep the files small and they will scale up to any size. Be sure to note SVG browser compatibility (http://caniuse.com/svg)

7) Consider CSS background size You can also use background-size: contain to scale image assets, which can make it easy to reuse the same image for both .preview and .input instances. However, it also has compatibility issues.

It does seem like a daunting project, mainly because there aren't any resources on how to build it. But if you break it down, it's actually quite easy. It's mainly the code maintenance that is an issue, so be sure to plan!