This JavaScript code powers a T-shirt designer application. It enables color selection, logo and text addition, and texture customization. This tool allows you to create and preview personalized T-shirt designs effortlessly.
You can utilize this code to add a customizable T-shirt designer feature on your e-commerce website. It simplifies T-shirt design by enabling color selection, logo placement, and text customization, making it a valuable addition for apparel businesses.
How to Create JavaScript T-shirt Designer Tool
1. First of all, load the jQuery, Magnifier JS (to view product image with zoom), and ColorPicker JS by adding the following CDN links into the head tag of your HTML document.
<script src="https://code.jquery.com/jquery-2.1.3.min.js" integrity="sha256-ivk71nXhz9nsyFDoYoGf2sbjrR9ddh+XDkCcfZxjvcM=" crossorigin="anonymous"></script> <script src="//res.cloudinary.com/demo-robert/raw/upload/magnifier.js"></script> <script src="//res.cloudinary.com/demo-robert/raw/upload/colorPicker.js"></script> <script src="//widget.cloudinary.com/global/all.js" type="text/javascript"></script>
2. After that, create the HTML structure for T-shirt designer tool as follows. Modify the code according to your needs.
<div id="demoContainer">
<div id="header">
<a href="https://cloudinary.com/">
<img width="172" height="38" src="https://res-1.cloudinary.com/cloudinary/image/asset/dpr_2.0/logo-e0df892053afd966cc0bfe047ba93ca4.png" alt="Cloudinary Logo">
</a>
<h1>Product Personalization Demo</h1>
</div>
<div id="imageDemoContainer">
<div id="preview">
</div>
<div id="mainImageLoading" class="hide"></div>
<div id="mainImage"><img id="mainImageTag" src="https://res.cloudinary.com/demo-robert/image/upload/w_700/e_red:0/e_blue:0/e_green:0/l_hanging-shirt-texture,o_0,fl_relative,w_1.0/l_Hanger_qa2diz,fl_relative,w_1.0/Hanging_T-Shirt_v83je9.jpg" data-large-img-url="https://res.cloudinary.com/demo-robert/image/upload/e_red:0/e_blue:0/e_green:0/l_hanging-shirt-texture,o_0,fl_relative,w_1.0/l_Hanger_qa2diz,fl_relative,w_1.0/Hanging_T-Shirt_v83je9.jpg"/></div>
<div id="imageThumbs">
<ul id="thumbs">
<li class="active" id="hangingThumb"><img src="https://res.cloudinary.com/demo-robert/image/upload/w_75/e_red:0/e_blue:0/e_green:0/l_hanging-shirt-texture,o_0,fl_relative,w_1.0/l_Hanger_qa2diz,fl_relative,w_1.0/Hanging_T-Shirt_v83je9.jpg" /></li>
<li id="layingThumb"><img src="https://res.cloudinary.com/demo-robert/image/upload/w_75/e_red:0/e_blue:0/e_green:0/l_laying-shirt-texture,o_0,fl_relative,w_1.0/laying-shirt_xqstgr.jpg" /></li>
<li id="modelThumb"><img src="https://res.cloudinary.com/demo-robert/image/upload/w_75/e_red:0/e_blue:0/e_green:0/u_model2,fl_relative,w_1.0/l_heather_texture,o_0,fl_relative,w_1.0/shirt_only.jpg" /></li>
</ul>
</div>
</div>
<div id="demoInputContainer">
<div class="inputSelections">
<h2>Select a color:</h2>
<ul id="colorList" class="swatches">
<li class="active" id="ffffff"><img src="//res.cloudinary.com/demo-robert/image/upload/w_30,h_30/l_heather_texture,o_0,w_30,h_30,c_crop/white-bar.jpg" /></li>
<li id="47E8D2"><img src="//res.cloudinary.com/demo-robert/image/upload/w_30,h_30/e_replace_color:47E8D2:60:white/l_heather_texture,o_0,w_30,h_30,c_crop/white-bar.jpg" /></li>
<li id="DCA381"><img src="//res.cloudinary.com/demo-robert/image/upload/w_30,h_30/e_replace_color:DCA381:60:white/l_heather_texture,o_0,w_30,h_30,c_crop/white-bar.jpg" /></li>
<li id="702C3C"><img src="//res.cloudinary.com/demo-robert/image/upload/w_30,h_30/e_replace_color:702C3C:60:white/l_heather_texture,o_0,w_30,h_30,c_crop/white-bar.jpg" /></li>
<li id="E9C660"><img src="//res.cloudinary.com/demo-robert/image/upload/w_30,h_30/e_replace_color:E9C660:60:white/l_heather_texture,o_0,w_30,h_30,c_crop/white-bar.jpg" /></li>
<li id="A11D1F"><img src="//res.cloudinary.com/demo-robert/image/upload/w_30,h_30/e_replace_color:A11D1F:60:white/l_heather_texture,o_0,w_30,h_30,c_crop/white-bar.jpg" /></li>
<li id="897115"><img src="//res.cloudinary.com/demo-robert/image/upload/w_30,h_30/e_replace_color:897115:60:white/l_heather_texture,o_0,w_30,h_30,c_crop/white-bar.jpg" /></li>
<li id="598DE6"><img src="//res.cloudinary.com/demo-robert/image/upload/w_30,h_30/e_replace_color:598DE6:60:white/l_heather_texture,o_0,w_30,h_30,c_crop/white-bar.jpg" /></li>
</ul>
<p><a href="#" onclick="addColor()">Add a custom color</a></p>
<input type='text' id="full"/>
</div>
<div class="inputSelections">
<h2>Select a texture:</h2>
<ul id="texture" class="swatches">
<li id="flat" class="active"><img src="//res.cloudinary.com/demo-robert/image/upload/w_30,h_30,e_red:0/e_green:0/e_blue:0/l_heather_texture,o_0,w_30,h_30,c_crop/white-bar.jpg" /></li>
<li id="heatherTexture"><img src="//res.cloudinary.com/demo-robert/image/upload/w_30,h_30,e_red:0/e_green:0/e_blue:0/l_heather_texture,o_30,w_30,h_30,c_crop/white-bar.jpg" /></li>
</ul>
</div>
<div class="inputSelections">
<h2>Add a logo:</h2>
<ul id="logo-list" class="swatches">
<li id="cloudinary-logo"><img src="//res.cloudinary.com/demo-robert/image/upload/q_auto,f_auto,h_30/cloudinary-logo.jpg" /></li>
<li id="fire"><img src="//res.cloudinary.com/demo-robert/image/upload/q_auto,f_auto,h_30/fire.png" /></li>
</ul>
<p><a href="#" id="add_a_logo">Add a Custom Logo</a></p>
</div>
<div class="inputSelections">
<h2>Add text:</h2>
<select id="fontList">
<option value="Arial">Arial</option>
<option value="Georgia">Georgia</option>
<option value="Sacramento">Sacramento</option>
<option value="Roboto">Roboto</option>
<option value="Montserrat">Montserrat</option>
<option value="Bitter">Bitter</option>
</select>
<div id="textInputContainer">
<input type="text" id="shirtText" />
<input type="button" id="addText" value="Add Text" />
</div>
</div>
</div>
</div>
3. Use the following CSS code to customize the basic interface for the T-shirt designing tool.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-family:arial;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
color:#2074b5;
text-decoration:none;
font-size:12px;
}
input {
border: 1px solid #888;
border-radius: 5px;
height: 24px;
line-height: 20px;
padding: 5px;
width: 200px;
float:left;
margin:0 5px 0 0;
}
#preview {
width:300px;
height:300px;
position:absolute;
left:0px;
top:0px;
overflow:hidden;
}
.show {
border:1px solid #888;
left:750px !important;
}
#addText {
background-color: #db631e;
border: medium none;
border-radius: 3px;
color: #fff;
font-size: 18px;
font-weight: bold;
height: 36px;
line-height: 24px;
width: 150px;
}
#demoContainer {
width:1200px;
height:auto;
margin:0 auto;
font-family:Roboto;
position:relative;
}
#header {
width:100%;
height:auto;
float:left;
margin:0 0 10px;
}
#header a {
float:left;
}
#header h1 {
font-size:30px;
color:#0E2F5A;
clear:none;
float:left;
margin:10px 0 0 20px;
}
#imageDemoContainer {
width:700px;
height:auto;
float:left;
position:relative;
}
#mainImageLoading {
width:700px;
height:700px;
position:absolute;
z-index:1000;
background:#fff url('//res.cloudinary.com/demo-robert/image/upload/v1452886398/loader.gif') no-repeat center;
opacity:.7;
}
.hide {
display:none !important;
}
#imageThumbs {
float:left;
width:100%;
height:75px;
}
ul#thumbs {
float:left;
list-style:none;
display:inline;
padding:0;
margin:10px 0 50px 50px;
}
ul#thumbs li {
float:left;
display:inline;
margin:0 10px 0 0;
border:1px solid #E8E8E8;
padding:0;
height:75px;
width:75px;
}
#demoInputContainer {
width:450px;
height:auto;
float:right;
padding:100px 0 0;
}
.inputSelections {
width:100%;
margin:0 0 20px;
height:auto;
float:left;
}
.inputSelections h2 {
font-weight:bold;
font-size:18px;
margin:5px 0 10px;
}
.inputSelections ul {
width:100%;
height:auto;
display:block;
clear:both;
float:left;
margin:0 0 15px;
}
.inputSelections ul li {
float:left;
padding:0;
width:auto;
border:1px solid #E8E8E8;
}
.swatches {
margin:-10px 0 15px !important;
}
.swatches li {
width:30px;
height:30px;
padding:0;
margin:10px 10px 0 0;
}
.inputSelections ul li:hover {
cursor:pointer;
}
ul#swatches li {
border:1px solid #E8E8E8;
height:50px;
padding:0;
width:auto;
}
#fontSelector li {
margin:0 10px 0 0;
height:30px;
width:auto;
}
ul.logo li {
height:50px;
}
.active {
border:1px solid #959595 !important;
}
#textInputContainer {
float:left;
width:100%;
height:auto;
}
#imageThumbs li:hover {
cursor:pointer;
}
#fontlist {
width:200px;
height:30px;
margin:0 0 15px;
}
#preview {
}
.magnifier-thumb-wrapper {
position: relative;
display: block;
top: 0;
left: 0
}
.magnifier-lens {
position: absolute;
border: solid 1px #ccc;
z-index: 1000;
top: 0;
left: 0;
overflow: hidden;
background-image: none !important;
}
.magnifier-loader {
position: absolute;
top: 0;
left: 0;
border: solid 1px #ccc;
color: #fff;
text-align: center;
background: transparent;
background: rgba(50, 50, 50, 0.5);
z-index: 1000;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F323232,endColorstr=#7F323232)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F323232,endColorstr=#7F323232)
}
.magnifier-loader-text {
font: 13px Arial;
margin-top: 10px
}
.magnifier-large {
position: absolute;
z-index: 100
}
.magnifier-preview {
padding: 0;
width: 100%;
height: 150px;
position: relative;
overflow: hidden
}
.magnifier-preview img {
position: absolute;
top: 0;
left: 0
}
.opaque {
opacity: 1;
filter: alpha(opacity=100);
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100)
}
.hidden {
display: none
}
/***
Spectrum Colorpicker v1.8.0
https://github.com/bgrins/spectrum
Author: Brian Grinstead
License: MIT
***/
.sp-container {
position:absolute;
top:0;
left:0;
display:inline-block;
*display: inline;
*zoom: 1;
/* https://github.com/bgrins/spectrum/issues/40 */
z-index: 9999994;
overflow: hidden;
}
.sp-container.sp-flat {
position: relative;
}
/* Fix for * { box-sizing: border-box; } */
.sp-container,
.sp-container * {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
.sp-top {
position:relative;
width: 100%;
display:inline-block;
}
.sp-top-inner {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
}
.sp-color {
position: absolute;
top:0;
left:0;
bottom:0;
right:20%;
}
.sp-hue {
position: absolute;
top:0;
right:0;
bottom:0;
left:84%;
height: 100%;
}
.sp-clear-enabled .sp-hue {
top:33px;
height: 77.5%;
}
.sp-fill {
padding-top: 80%;
}
.sp-sat, .sp-val {
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
}
.sp-alpha-enabled .sp-top {
margin-bottom: 18px;
}
.sp-alpha-enabled .sp-alpha {
display: block;
}
.sp-alpha-handle {
position:absolute;
top:-4px;
bottom: -4px;
width: 6px;
left: 50%;
cursor: pointer;
border: 1px solid black;
background: white;
opacity: .8;
}
.sp-alpha {
display: none;
position: absolute;
bottom: -14px;
right: 0;
left: 0;
height: 8px;
}
.sp-alpha-inner {
border: solid 1px #333;
}
.sp-clear {
display: none;
}
.sp-clear.sp-clear-display {
background-position: center;
}
.sp-clear-enabled .sp-clear {
display: block;
position:absolute;
top:0px;
right:0;
bottom:0;
left:84%;
height: 28px;
}
/* Don't allow text selection */
.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button {
-webkit-user-select:none;
-moz-user-select: -moz-none;
-o-user-select:none;
user-select: none;
}
.sp-container.sp-input-disabled .sp-input-container {
display: none;
}
.sp-container.sp-buttons-disabled .sp-button-container {
display: none;
}
.sp-container.sp-palette-buttons-disabled .sp-palette-button-container {
display: none;
}
.sp-palette-only .sp-picker-container {
display: none;
}
.sp-palette-disabled .sp-palette-container {
display: none;
}
.sp-initial-disabled .sp-initial {
display: none;
}
/* Gradients for hue, saturation and value instead of images. Not pretty... but it works */
.sp-sat {
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
}
.sp-val {
background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
}
.sp-hue {
background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}
/* IE filters do not support multiple color stops.
Generate 6 divs, line them up, and do two color gradients for each.
Yes, really.
*/
.sp-1 {
height:17%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
}
.sp-2 {
height:16%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
}
.sp-3 {
height:17%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
}
.sp-4 {
height:17%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
}
.sp-5 {
height:16%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
}
.sp-6 {
height:17%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
}
.sp-hidden {
display: none !important;
}
/* Clearfix hack */
.sp-cf:before, .sp-cf:after { content: ""; display: table; }
.sp-cf:after { clear: both; }
.sp-cf { *zoom: 1; }
/* Mobile devices, make hue slider bigger so it is easier to slide */
@media (max-device-width: 480px) {
.sp-color { right: 40%; }
.sp-hue { left: 63%; }
.sp-fill { padding-top: 60%; }
}
.sp-dragger {
border-radius: 5px;
height: 5px;
width: 5px;
border: 1px solid #fff;
background: #000;
cursor: pointer;
position:absolute;
top:0;
left: 0;
}
.sp-slider {
position: absolute;
top:0;
cursor:pointer;
height: 3px;
left: -1px;
right: -1px;
border: 1px solid #000;
background: white;
opacity: .8;
}
/*
Theme authors:
Here are the basic themeable display options (colors, fonts, global widths).
See http://bgrins.github.io/spectrum/themes/ for instructions.
*/
.sp-container {
border-radius: 0;
background-color: #ECECEC;
border: solid 1px #f0c49B;
padding: 0;
}
.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear {
font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.sp-top {
margin-bottom: 3px;
}
.sp-color, .sp-hue, .sp-clear {
border: solid 1px #666;
}
/* Input */
.sp-input-container {
float:right;
width: 100px;
margin-bottom: 4px;
}
.sp-initial-disabled .sp-input-container {
width: 100%;
}
.sp-input {
font-size: 12px !important;
border: 1px inset;
padding: 4px 5px;
margin: 0;
width: 100%;
background:transparent;
border-radius: 3px;
color: #222;
}
.sp-input:focus {
border: 1px solid orange;
}
.sp-input.sp-validation-error {
border: 1px solid red;
background: #fdd;
}
.sp-picker-container , .sp-palette-container {
float:left;
position: relative;
padding: 10px;
padding-bottom: 300px;
margin-bottom: -290px;
}
.sp-picker-container {
width: 172px;
border-left: solid 1px #fff;
}
/* Palettes */
.sp-palette-container {
border-right: solid 1px #ccc;
}
.sp-palette-only .sp-palette-container {
border: 0;
}
.sp-palette .sp-thumb-el {
display: block;
position:relative;
float:left;
width: 24px;
height: 15px;
margin: 3px;
cursor: pointer;
border:solid 2px transparent;
}
.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
border-color: orange;
}
.sp-thumb-el {
position:relative;
}
/* Initial */
.sp-initial {
float: left;
border: solid 1px #333;
}
.sp-initial span {
width: 30px;
height: 25px;
border:none;
display:block;
float:left;
margin:0;
}
.sp-initial .sp-clear-display {
background-position: center;
}
/* Buttons */
.sp-palette-button-container,
.sp-button-container {
float: right;
}
/* Replacer (the little preview div that shows up instead of the <input>) */
.sp-replacer {
margin:0;
overflow:hidden;
cursor:pointer;
padding: 4px;
display:inline-block;
*zoom: 1;
*display: inline;
border: solid 1px #91765d;
background: #eee;
color: #333;
vertical-align: middle;
}
.sp-replacer:hover, .sp-replacer.sp-active {
border-color: #F0C49B;
color: #111;
}
.sp-replacer.sp-disabled {
cursor:default;
border-color: silver;
color: silver;
}
.sp-dd {
padding: 2px 0;
height: 16px;
line-height: 16px;
float:left;
font-size:10px;
}
.sp-preview {
position:relative;
width:25px;
height: 20px;
border: solid 1px #222;
margin-right: 5px;
float:left;
z-index: 0;
}
.sp-palette {
*width: 220px;
max-width: 220px;
}
.sp-palette .sp-thumb-el {
width:16px;
height: 16px;
margin:2px 1px;
border: solid 1px #d0d0d0;
}
.sp-container {
padding-bottom:0;
}
/* Buttons: http://hellohappy.org/css3-buttons/ */
.sp-container button {
background-color: #eeeeee;
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
border: 1px solid #ccc;
border-bottom: 1px solid #bbb;
border-radius: 3px;
color: #333;
font-size: 14px;
line-height: 1;
padding: 5px 4px;
text-align: center;
text-shadow: 0 1px 0 #eee;
vertical-align: middle;
}
.sp-container button:hover {
background-color: #dddddd;
background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
border: 1px solid #bbb;
border-bottom: 1px solid #999;
cursor: pointer;
text-shadow: 0 1px 0 #ddd;
}
.sp-container button:active {
border: 1px solid #aaa;
border-bottom: 1px solid #888;
-webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
}
.sp-cancel {
font-size: 11px;
color: #d93f3f !important;
margin:0;
padding:2px;
margin-right: 5px;
vertical-align: middle;
text-decoration:none;
}
.sp-cancel:hover {
color: #d93f3f !important;
text-decoration: underline;
}
.sp-palette span:hover, .sp-palette span.sp-thumb-active {
border-color: #000;
}
.sp-preview, .sp-alpha, .sp-thumb-el {
position:relative;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
}
.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {
display:block;
position:absolute;
top:0;left:0;bottom:0;right:0;
}
.sp-palette .sp-thumb-inner {
background-position: 50% 50%;
background-repeat: no-repeat;
}
.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
}
.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
}
.sp-clear-display {
background-repeat:no-repeat;
background-position: center;
background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
}
.full-spectrum .sp-palette {
max-width: 200px;
}
.sp-palette-container {
border-right: 1px solid #ccc;
display: none;
}
4. Finally, integrate the JavaScript code into your website to handle the T-shirt designer functionality.
<script>
//generic image vars
var URLPrefix = 'https://res.cloudinary.com/demo-robert/q_auto,f_auto/',
textString = '%20',
textVariable1 = '$text_!',
textVariable2 = '!/o_0/',
logoID = 'sample,o_0',
textFont = 'arial',
newHexColor = 'white',
URLSuffix = 'shirt_only.jpg',
textureOpacity = '0',
logoResult = '';
//model image vars
var modelOverlayString1 = 'l_',
modelOverlayString2 = ',w_300,ar_30:25,c_fit,y_-200,x_-5,e_overlay/',
modelTextTransform1 = 'l_text:',
modelTextTransform2 = '_100_bold:$(text),y_-40,co_rgb:333,o_70,w_300/',
modelDisplace = 'l_shirt_displace,e_displace,x_10,y_10/',
modelShirtUnderlay1 = 'u_shirt_only,e_replace_color:'
modelShirtUnderlay2 = ':60:white/',
modelTexture = 'l_heather_texture,o_',
modelUnderlay = '/u_model2/';
//hanging image vars
var hangingOverlayString1 = 'l_',
hangingOverlayString2 = ',w_220,ar_30:25,c_fit,y_-40,x_-5,e_overlay/',
hangingTextTransform1 = 'l_text:',
hangingTextTransform2 = '_100_bold:$(text),y_90,co_rgb:333,o_70,w_250/',
hangingDisplace = 'l_hanging_displace,e_displace,x_10,y_10/',
hangingShirtUnderlay1 = 'u_Hanging_T-Shirt_v83je9,e_replace_color:',
hangingShirtUnderlay2 = ':60:white/',
hangingTexture1 = 'l_hanging-shirt-texture,o_',
hangingTexture2 = '/l_Hanger_qa2diz,fl_relative,w_1.0/';
//laying image vars
var layingOverlayString1 = 'l_',
layingOverlayString2 = ',w_330,ar_30:25,c_fit,y_-30,x_-5,e_overlay/',
layingTextTransform1 = 'l_text:',
layingTextTransform2 = '_100_bold:$(text),y_150,co_rgb:333,o_70,w_350/',
layingDisplace = 'l_laying_displace,e_displace,x_10,y_10/',
layingShirtUnderlay1 = 'u_laying-shirt_xqstgr,e_replace_color:',
layingShirtUnderlay2 = ':60:white/',
layingTexture = 'l_laying-shirt-texture,o_';
//end image vars
//Invoke Color Swatch and set settings
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
$(document).ready(function(){
$(".basic").spectrum({
color: "#f00",
change: function(color) {
$("#basic-log").text("change called: " + color.toHexString());
}
});
$("#full").spectrum({
color: "#ECC",
showInput: true,
className: "full-spectrum",
showInitial: true,
showPalette: true,
showSelectionPalette: true,
maxSelectionSize: 10,
preferredFormat: "rgb",
localStorageKey: "spectrum.demo",
move: function (color) {
},
show: function () {
},
beforeShow: function () {
},
hide: function () {
},
change: function(color) {
var firstSwatch = $('#colorList')[0].children[0].children[0].src;
newHexColor = color.toHexString().split('#')[1];
var hexColor = color.toHexString().split('#')[1],
newSrc = '//res.cloudinary.com/demo-robert/image/upload/w_30,h_30/e_replace_color:'+hexColor+':60:white/l_heather_texture,o_0,w_30,h_30,c_crop/white-bar.jpg';
$("#colorList").append('<li id="'+hexColor+'"><img src="'+newSrc+'" /></li>');
colorSwatchClick();
},
palette: [
["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)",
"rgb(204, 204, 204)", "rgb(217, 217, 217)","rgb(255, 255, 255)"],
["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
"rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"],
["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)",
"rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)",
"rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)",
"rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)",
"rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)",
"rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
"rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
"rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
"rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)",
"rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
]
})});
//Invoke magnifier
$(document).ready(function(){
var evt = new Event(),
mag = new Magnifier(evt);
mag.attach({
thumb: '#mainImageTag',
largeWrapper: 'preview',
zoom: '4'
});
$("#mainImage").hover(
function() {
$('#preview').addClass('show');
}, function() {
$('#preview').removeClass('show');
}
);
});
//open upload Widget and set response variable
document.getElementById("add_a_logo").addEventListener("click", function() {
cloudinary.openUploadWidget({ cloud_name: 'demo-robert', upload_preset: 'pagespeed'},
function(error, result) {
if(!result)return;
window.logoResult=result[0];
addLogo();
});
}, false);
//loader gif while images are loading
function loader(a){
$('#mainImageLoading').removeClass('hide');
var newImage = new Image();
newImage.src= a;
$(newImage).one("load", function() {
$('#mainImageLoading').addClass('hide');
}).each(function() {
if(this.complete) $(this).load();
});
}
//Update Image URLS
function updateImageURLs(){
var mainImageURL = function(){
if ($('#thumbs .active')[0].id == 'hangingThumb'){
return URLPrefix+textVariable1+textString+textVariable2+hangingOverlayString1+logoID+hangingOverlayString2+hangingTextTransform1+textFont+hangingTextTransform2+hangingDisplace+hangingShirtUnderlay1+newHexColor+hangingShirtUnderlay2+hangingTexture1+textureOpacity+hangingTexture2+'w_700,ar_1:1,c_pad/'+URLSuffix
}
else if ($('#thumbs .active')[0].id == 'layingThumb'){
return URLPrefix+textVariable1+textString+textVariable2+layingOverlayString1+logoID+layingOverlayString2+layingTextTransform1+textFont+layingTextTransform2+layingDisplace+layingShirtUnderlay1+newHexColor+layingShirtUnderlay2+layingTexture+textureOpacity+'/w_700,ar_1:1,c_pad/'+URLSuffix
}
else {
return URLPrefix+textVariable1+textString+textVariable2+modelOverlayString1+logoID+modelOverlayString2+modelTextTransform1+textFont+modelTextTransform2+modelDisplace+modelShirtUnderlay1+newHexColor+modelShirtUnderlay2+modelTexture+textureOpacity+modelUnderlay+'w_700,ar_1:1,c_pad/'+URLSuffix
}
}()
//run loader gif until image is loaded
loader(mainImageURL);
//set new main image URL
document.getElementById('mainImageTag').src = mainImageURL;
document.getElementById('mainImageTag').setAttribute('data-large-img-url', document.getElementById('mainImageTag').src.replace('w_700,',''));
document.getElementById('mainImageTag-large').src = document.getElementById('mainImageTag').src.replace('w_700,','');
//set new Thumbnail URLs
document.getElementById('hangingThumb').children[0].src = URLPrefix+textVariable1+textString+textVariable2+hangingOverlayString1+logoID+hangingOverlayString2+hangingTextTransform1+textFont+hangingTextTransform2+hangingDisplace+hangingShirtUnderlay1+newHexColor+hangingShirtUnderlay2+hangingTexture1+textureOpacity+hangingTexture2+'w_75,ar_1:1,c_pad/'+URLSuffix
document.getElementById('layingThumb').children[0].src = URLPrefix+textVariable1+textString+textVariable2+layingOverlayString1+logoID+layingOverlayString2+layingTextTransform1+textFont+layingTextTransform2+layingDisplace+layingShirtUnderlay1+newHexColor+layingShirtUnderlay2+layingTexture+textureOpacity+'/w_75,ar_1:1,c_pad/'+URLSuffix
document.getElementById('modelThumb').children[0].src = URLPrefix+textVariable1+textString+textVariable2+modelOverlayString1+logoID+modelOverlayString2+modelTextTransform1+textFont+modelTextTransform2+modelDisplace+modelShirtUnderlay1+newHexColor+modelShirtUnderlay2+modelTexture+textureOpacity+modelUnderlay+'w_75,ar_1:1,c_pad/'+URLSuffix
}
//Color-changing when somebody clicks on a color swatch
function colorSwatchClick(){
$("#colorList li").on("click", function() {
$('#colorList .active').removeClass('active');
$(this).addClass('active');
//set window color variable
newHexColor = $('#colorList .active')[0].id;
//update image URLS
updateImageURLs();
//Set flat color swatch color
document.getElementById('flat').children[0].src = "https://res.cloudinary.com/demo-robert/image/upload/w_30,h_30/e_replace_color:"+newHexColor+":60:white/l_heather_texture,o_0,w_30,h_30,c_crop/white-bar.jpg"
//Set heather texture swatch color
document.getElementById('heatherTexture').children[0].src = "https://res.cloudinary.com/demo-robert/image/upload/w_30,h_30/e_replace_color:"+newHexColor+":60:white/l_heather_texture,o_30,w_30,h_30,c_crop/white-bar.jpg";
})
};
//Thumnail to main image
function thumbToMain(){
$("#thumbs li").on("click", function() {
$('#thumbs .active').removeClass('active');
$(this).addClass('active');
updateImageURLs();
})
};
//Texture add/remove
function textureSwap(){
$("#texture li").on("click", function() {
$('#texture .active').removeClass('active');
$(this).addClass('active');
//set texture opacity window variable
if ($('#texture .active')[0].id == 'flat'){
textureOpacity = '0';
}
else {
textureOpacity = '30';
}
//rebuild URLS
updateImageURLs();
var newTexture = 'texture,o_'+textureOpacity;
var numColors = document.getElementById('colorList').children.length;
for (var i=0; i<numColors;i++){
document.getElementById('colorList').children[i].children[0].src = document.getElementById('colorList').children[i].children[0].src.replace(/texture,o_([^,]+)/,newTexture);
}
})
};
//add logo to images
function addLogo(){
logoID = logoResult.public_id;
var newLogoSrc = "//res.cloudinary.com/demo-robert/q_auto,f_auto,h_30/"+logoID;
$("#logo-list").prepend('<li id="'+logoID+'"><img src="'+newLogoSrc+'"/></li>');
updateImageURLs();
}
function applyLogo(){
$("#logo-list li").on("click", function() {
$('#logo-list .active').removeClass('active');
$(this).addClass('active');
logoID = $('#logo-list .active')[0].id;
updateImageURLs();
applyLogo();
})
}
//add text to images
function addText(){
$("#addText").on("click", function() {
textString = $('#shirtText').val();
textFont = $('#fontList').val();
updateImageURLs();
})
}
//initialize click watchers
$(document).ready(function(){
colorSwatchClick();
thumbToMain();
textureSwap();
addText();
applyLogo();
});
</script>
You can customize the code further to fit your website’s design and requirements. For example, you can adjust the layout and appearance of the T-shirt designer elements to match your site’s style.
That’s all! hopefully, you have successfully created a JavaScript T-shirt Designer tool for your website. If you have any questions or suggestions, feel free to comment below.
Similar Code Snippets:
- JavaScript Button Ripple Effect Onclick
- Random Quote Generator JavaScript
- JavaScript Detect Media Query Changes
- Progressive Image Loading in JavaScript
- Creating Keyboard Shortcuts in JavaScript
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.