JavaScript T-shirt Designer Code with Demo

by
JavaScript T-shirt Designer
Code Snippet:Cloudinary Product Personalization
Author: Robert Moseley
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 1,459
License: MIT
Edit Code online: View on CodePen
Read More
 Demo
Download (12 KB)

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:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

F5
X