Cubexy.js

(Avatar Generator)

---

Quick start

1.- Include the files

<!-- Bootstrap and JQuery -->
<script src="jquery-2.1.4.min.js"> </script>
    
<!-- Plugin -->
<script src="Cubexy.js"></script>

2.- Create HTML Element (Ouput canvas)

            
<canvas width="300" height="300" id="canvas"></canvas>

<a id="Descargar">Descargar</a>

<a id="Preview">Preview</a>

<input type="hidden" id="colores"  />

3.- Create HTML Element (Parts - Images png)

<div id="avatar">





<div id="Rostro" >

<img src="1_piel/1.png"/>

</div>




<div id="Ojos">

<img src="2_Ojos/1.png"/>

<img src="2_Ojos/2.png"/>

</div>




<div id="Pelo">

<img src="4_Pelo/3.png"/>

<img src="4_Pelo/2.png"/>

</div>




<div id="Boca">

<img src="3_Boca/11.png"/>

<img src="3_Boca/12.png"/>

</div>




</div>

4.- Call the the plugin on a container as your wish

    $('#avatar').Cubexy();
               

4.- All done!

Options

you can custom by passing options when call the plugin, all available options are listed below. call the the plugin on a container wish you wish

       idInputColor:'colores',
						 idDownload:'Descargar', /* Button Download image */
						 idPreview:'Preview', /* Button Preview image */
						 CanvasSalida:'canvas',  /* Canvas result */
						 attImagenGrande:'src', /* Big Image merge */
						 cssDefault:true, /* use css default ? */
						 cssCambioColor:'actual', /* css Color Selector */
						 cssParteActiva:'activo', /* css part Selector */
						 cssParteUnica:'seleccionado', /* css image Selector */
						 cssColorPicker:'colors' /* css Color Picker Selector */
                 
               

Demo (Options)

        { idDownload:"Donwloadid" /* Button Download image */}
           

---

Buy Packs (More Images)

Buy Pack 1: Gift - Pack 2: