Just change the images link and download js min files
Dealquicker.com
Follow my blog with Bloglovin

   $(document).ready(function(e) {
 
  $('.draggable').resize();

    $.fn.draggable = function() {
        var offset = null;
        var start = function(e) {
          var orig = e.originalEvent;
          var pos = $(this).position();
          offset = {
            x: orig.changedTouches[0].pageX - pos.left,
            y: orig.changedTouches[0].pageY - pos.top
          };
        };
        var moveMe = function(e) {
          e.preventDefault();
          var orig = e.originalEvent;
          $(this).css({
            top: orig.changedTouches[0].pageY - offset.y,
            left: orig.changedTouches[0].pageX - offset.x
          });
        };
        this.bind("touchstart", start);
        this.bind("touchmove", moveMe);
      };

      $(".draggable").draggable();








});



$(document).ready(function(e) {
$('#size2').change(function(e) {
        var val=$('#size2').val();
if(val=='XXS')
{
$('#model img').css({
'width':'60%',
'margin-left':'20%'
});

}
else if( val=='XS')
{
$('#model img').css({
'width':'65%',
'margin-left':'18%'
});
}
else if(val=='XL')
{
$('#model img').css({

'width':'70%',
'margin-left':'16%' });
}
else if(val=='2XL')
{
$('#model img').css({

'width':'75%',
'margin-left':'14%' });
}
else if(val=='3XL')
{
$('#model img').css({

'width':'80%',
'margin-left':'12%' });
}
else if(val=='4XL')
{
$('#model img').css({

'width':'85%',
'margin-left':'10%' });
}
else if(val=='5XL')
{
$('#model img').css({

'width':'90%',
'margin-left':'8%' });
}


    });

});


/*





var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var dobj;
function movemouse(e)
{
  if (isdrag)
  {
    dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
    dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
    return false;
  }
}
function selectmouse(e)
{
  var fobj       = nn6 ? e.target : event.srcElement;
  var topelement = nn6 ? "HTML" : "BODY";
  while (fobj.tagName != topelement && fobj.className != "draggable")
  {
    fobj = nn6 ? fobj.parentNode : fobj.parentElement;
  }
  if (fobj.className=="draggable")
  {
    isdrag = true;
    dobj = fobj;
    tx = parseInt(dobj.style.left+0,10);
    ty = parseInt(dobj.style.top+0,10);
    x = nn6 ? e.clientX : event.clientX;
    y = nn6 ? e.clientY : event.clientY;
    document.onmousemove=movemouse;
    return false;
  }
}
document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");



<style>*{margin:auto;
padding:0px;}
.dragme{position:relative;}

.draggable {
        position:relative;}
a{text-decoration:none;}

body{font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration:none;
font-weight:normal;
}

span{font-size:24px;


font-weight:normal;
color:#5d5d5d;
}

.fl{margin-left:5%;
text-align:right;
}


@media screen and (max-width:480px){
header{width:100%;
background:#0069D2;
height:34px;
text-align:center;
padding-top:1%;}

header strong{ font-size:20px;
float:left;
text-align:center;
font-weight:normal;
color:#fff;
margin-left:1.5%;}

#main{width:100%;
height:auto;
background:#fefefe;
padding-bottom:1%;
margin-bottom:1%;
display:inline-block;
}

#row{width:100%;
height:auto;
margin:auto;
padding-bottom:1%;
margin-bottom:1%;
display:inline-block;
}


#col60{width:60%;
height:400px;
float:left;
//box-shadow:-2px -0px 6px 1px #000;
border-right:1px solid #444;
}


#col40{width:38%;
height:400px;
float:left;}

.dressname{width:90%;
height:35px;
padding-top:2%;
text-align:center;
margin:auto;

}

#bottom-area{width:100%;
height:100px;
margin:auto;

}

footer{
width:100%;
height:35px;
margin:auto;
background:#0069D2;
}

#bview{width:40%;
height:30px;
float:left;
margin-left:2%;
}


#bview strong{ font-size:20px;
float:left;

font-weight:normal;
color:#fff;
margin-left:1.5%;}

#model{ width:90%;
height:auto;
margin:auto;
margin-top:11%;
overflow:hidden;
}

#model img{width:65%;
margin-left:25%;
height:auto;
float:left;}


#select{
border-radius:4px;
box-shadow:1px 0px 8px -5px #333;
float:left;
cursor:pointer;
height:25px;
width:50%;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:normal;
color:#5d5d5d;
font-size:14px;
border:none;
background: #e6f0a3; /* Old browsers */
background: -moz-linear-gradient(top,  #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#dbf043)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* IE10+ */
background: linear-gradient(to bottom,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */


}

#select option{ background:#defc8e;}

#ar{background:url(../img/ar.png) no-repeat;
float: left;
    height: 10px;
    margin-left: -8%;
    margin-top: 4.5%;
    position: relative;
    width: 10px;
display:none;

}

#button{border-radius:4px;
box-shadow:1px 0px 8px -5px #333;
float:left;
margin-left:8%;
cursor:pointer;
height:25px;
width:35%;

font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:normal;
color:#5d5d5d;
font-size:14px;
border:none;
background: #e6f0a3; /* Old browsers */
background: -moz-linear-gradient(top,  #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#dbf043)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* IE10+ */
background: linear-gradient(to bottom,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */}


#button:hover{background: #f8ffe8; /* Old browsers */
background: -moz-linear-gradient(top,  #f8ffe8 0%, #e3f5ab 33%, #b7df2d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8ffe8), color-stop(33%,#e3f5ab), color-stop(100%,#b7df2d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8ffe8', endColorstr='#b7df2d',GradientType=0 ); /* IE6-9 */
}




#dressimg{ width:100%;
height:390px;
margin:auto;
margin-top:4%;
margin-bottom:1%;
padding:2px;
display:inline-block;

}


#dressimg img{
width:70%;
//width:68%;
height:auto;
  margin-top:5%;
float:left;}


}



@media screen and (min-width:481px){
header{width:100%;
background:#1baa3c;
height:34px;
padding-top:1%;}

header strong{ font-size:20px;
float:left;

font-weight:normal;
color:#fff;
margin-left:1.5%;}

#main{width:100%;
height:auto;
background:#fefefe;
padding-bottom:1%;
margin-bottom:1%;
display:inline-block;
}

#row{width:100%;
height:auto;
margin:auto;
padding-bottom:1%;
margin-bottom:1%;
display:inline-block;
}


#col60{width:60%;
height:500px;
float:left;
box-shadow:-2px -0px 6px 1px #000;
}


#col40{width:40%;
height:500px;
float:left;}

.dressname{width:90%;
height:35px;
padding-top:2%;
text-align:center;
margin:auto;

}

#bottom-area{width:100%;
height:100px;
margin:auto;

}

footer{
width:100%;
height:35px;
margin:auto;
background:#1baa3c;
}

#bview{width:40%;
height:30px;
float:left;
margin-left:2%;
}


#bview strong{ font-size:20px;
float:left;

font-weight:normal;
color:#fff;
margin-left:1.5%;}

#model{ width:59%;
height:auto;
margin:auto;
overflow:hidden;
}

#model img{width:100%;
height:auto;
margin-left:0%;
float:left;}


#select{
border-radius:4px;
box-shadow:1px 0px 8px -5px #333;
float:left;
cursor:pointer;
height:25px;
width:50%;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:normal;
color:#5d5d5d;
font-size:14px;
border:none;
background: #e6f0a3; /* Old browsers */
background: -moz-linear-gradient(top,  #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#dbf043)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* IE10+ */
background: linear-gradient(to bottom,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */


}

#select option{ background:#defc8e;}

#ar{background:url(../img/ar.png) no-repeat;
float: left;
    height: 10px;
    margin-left: -8%;
    margin-top: 2.5%;
    position: relative;
    width: 10px;
display:none;

}

#button{border-radius:4px;
box-shadow:1px 0px 8px -5px #333;
float:left;
margin-left:8%;
cursor:pointer;
height:25px;
width:35%;

font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:normal;
color:#5d5d5d;
font-size:14px;
border:none;
background: #e6f0a3; /* Old browsers */
background: -moz-linear-gradient(top,  #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#dbf043)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* IE10+ */
background: linear-gradient(to bottom,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */}


#button:hover{background: #f8ffe8; /* Old browsers */
background: -moz-linear-gradient(top,  #f8ffe8 0%, #e3f5ab 33%, #b7df2d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8ffe8), color-stop(33%,#e3f5ab), color-stop(100%,#b7df2d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8ffe8', endColorstr='#b7df2d',GradientType=0 ); /* IE6-9 */
}




#dressimg{ width:100%;
height:410px;
margin:auto;
margin-top:4%;
margin-bottom:1%;
padding:2px;
display:inline-block;

}


#dressimg img{
width:19%;
//width:47%;
height:auto;
margin-left:-10%;}


}





@media screen and (min-width:1028px){
header{width:100%;
background:#1baa3c;
height:34px;
padding-top:1%;}

header strong{ font-size:20px;
float:left;
font-weight:normal;
color:#fff;
margin-left:1.5%;}

#main{width:100%;
height:auto;
background:#fefefe;
padding-bottom:1%;
margin-bottom:1%;
display:inline-block;
}

#row{width:100%;
height:auto;
margin:auto;
padding-bottom:1%;
margin-bottom:1%;
display:inline-block;
}


#col60{width:60%;
height:500px;
float:left;
box-shadow:-2px -0px 6px 1px #000;
}


#col40{width:40%;
height:500px;
float:left;}

.dressname{width:90%;
height:35px;
padding-top:2%;
text-align:center;
margin:auto;

}

#bottom-area{width:100%;
height:100px;
margin:auto;

}

footer{
width:100%;
height:35px;
margin:auto;
background:#1baa3c;
}

#bview{width:40%;
height:30px;
float:left;
margin-left:2%;
}


#bview strong{ font-size:20px;
float:left;
font-weight:normal;
color:#fff;
margin-left:1.5%;}

#model{ width:90%;
height:auto;
margin:auto;
overflow:hidden;
}

#model img{width:37%;
height:auto;
margin-left:30%;
float:left;}


#select{
border-radius:4px;
box-shadow:1px 0px 8px -5px #333;
float:left;
cursor:pointer;
height:25px;
width:50%;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:normal;
color:#5d5d5d;
font-size:14px;
border:none;
background: #e6f0a3; /* Old browsers */
background: -moz-linear-gradient(top,  #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#dbf043)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* IE10+ */
background: linear-gradient(to bottom,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */


}

#select option{ background:#defc8e;}

#ar{background:url(../img/ar.png) no-repeat;
float: left;
    height: 10px;
    margin-left: -8%;
    margin-top: 1.5%;
    position: relative;
    width: 10px;
display:none;

}

#button{border-radius:4px;
box-shadow:1px 0px 8px -5px #333;
float:left;
margin-left:8%;
cursor:pointer;
height:25px;
width:35%;

font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:normal;
color:#5d5d5d;
font-size:14px;
border:none;
background: #e6f0a3; /* Old browsers */
background: -moz-linear-gradient(top,  #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#dbf043)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* IE10+ */
background: linear-gradient(to bottom,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */}


#button:hover{background: #f8ffe8; /* Old browsers */
background: -moz-linear-gradient(top,  #f8ffe8 0%, #e3f5ab 33%, #b7df2d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8ffe8), color-stop(33%,#e3f5ab), color-stop(100%,#b7df2d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8ffe8', endColorstr='#b7df2d',GradientType=0 ); /* IE6-9 */
}




#dressimg{ width:100%;
height:410px;
margin:auto;
margin-top:-19%;
margin-bottom:1%;
padding:2px;
display:inline-block;

}


#dressimg img{
width:14%;
//width:40%;
height:auto;

margin:5% auto auto -6%;}


}



div.sc_menu_wrapper {
position: relative;
height: 371px;
/* Make bigger than a photo, because we need a place for a scrollbar. */
width: 160px;

margin-top: 30px;
//overflow: auto;
overflow-x:scroll;
overflow-y:visible;

}
div.sc_menu {
padding: 15px 0;
}
.sc_menu a {
display: block;
margin-bottom: 5px;
width: 130px;

//border: 2px  solid;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;

/* When image support is turned off */
color: #fff;

}
.sc_menu a:hover {
//border-color: rgb(130, 130, 130);
//border-style: dotted;
}
.sc_menu img {
display: block;
border: none;
width:80%;
height:auto;
}

.sc_menu_wrapper .loading {
position: absolute;
top: 50px;
left: 10px;

margin: 0 auto;
padding: 10px;

width: 100px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;

text-align: center;
color: #fff;
//border: 1px solid rgb(79, 79, 79);
background: #1F1D1D;
}
/* Styling tooltip */
.sc_menu_tooltip {
display: block;
position: absolute;

padding: 6px;
font-size: 12px;
color: #fff;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;

//border: 1px solid rgb(79, 79, 79);
background: rgb(0, 0, 0);
/* Make background a bit transparent for browsers that support rgba */
background: rgba(0, 0, 0, 0.5);
}

/* Here are styles for a link to an article. Not for you :) */
#back {
margin-left: 8px;
color: gray;
font-size: 18px;
text-decoration: none;
}
#back:hover {
text-decoration: underline;
}</style>



<html>
<head>
<link rel="stylesheet"   href="css/style.css"/>

<!--
<link rel="stylesheet"  type="text/css" href="css/jquery-ui.css">
<meta name="viewport" content="max-width=480px , user-scalable=false;">
<meta name="viewport" content="min-width=481px , user-scalable=false;">
<meta name="viewport" content="min-width=1028px , user-scalable=false;">-->

<meta name="viewport" content="width=device-width, user-scalable=false;">


<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/custom.js"></script>

<!--<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

-->
<script>


function makeScrollable(wrapper, scrollable){
// Get jQuery elements
var wrapper = $(wrapper), scrollable = $(scrollable);

// Hide images until they are not loaded
scrollable.hide();
var loading = $('<div class="loading">Loading...</div>').appendTo(wrapper);

// Set function that will check if all images are loaded
var interval = setInterval(function(){
var images = scrollable.find('img');
var completed = 0;

// Counts number of images that are succesfully loaded
images.each(function(){
if (this.complete) completed++;
});

if (completed == images.length){
clearInterval(interval);
// Timeout added to fix problem with Chrome
setTimeout(function(){

loading.hide();
// Remove scrollbars
//wrapper.css({'overflow': 'auto', 'z-index':'55'});

scrollable.slideDown('slow', function(){
enable();
});
}, 1000);
}
}, 100);

function enable(){
// height of area at the top at bottom, that don't respond to mousemove
var inactiveMargin = 99;
// Cache for performance
var wrapperWidth = wrapper.width();
var wrapperHeight = wrapper.height();
// Using outer height to include padding too
var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
// Do not cache wrapperOffset, because it can change when user resizes window
// We could use onresize event, but it's just not worth doing that
// var wrapperOffset = wrapper.offset();

// Create a invisible tooltip
var tooltip = $('<div class="sc_menu_tooltip"></div>')
.css('opacity', 0)
.appendTo(wrapper);

// Save menu titles
scrollable.find('a').each(function(){
$(this).data('tooltipText', this.title);
});

// Remove default tooltip
scrollable.find('a').removeAttr('title');
// Remove default tooltip in IE
scrollable.find('img').removeAttr('alt');

var lastTarget;
//When user move mouse over menu
wrapper.mousemove(function(e){
// Save target
lastTarget = e.target;

var wrapperOffset = wrapper.offset();

var tooltipLeft = e.pageX - wrapperOffset.left;
// Do not let tooltip to move out of menu.
// Because overflow is set to hidden, we will not be able too see it
tooltipLeft = Math.min(tooltipLeft, wrapperWidth - 75); //tooltip.outerWidth());

var tooltipTop = e.pageY - wrapperOffset.top + wrapper.scrollTop() - 40;
// Move tooltip under the mouse when we are in the higher part of the menu
if (e.pageY - wrapperOffset.top < wrapperHeight/2){
tooltipTop += 80;
}
tooltip.css({top: tooltipTop, left: tooltipLeft});

// Scroll menu
var top = (e.pageY -  wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
if (top < 0){
top = 0;
}
wrapper.scrollTop(top);
});

// Setting interval helps solving perfomance problems in IE
var interval = setInterval(function(){
if (!lastTarget) return;

var currentText = tooltip.text();

if (lastTarget.nodeName == 'IMG'){
// We've attached data to a link, not image
var newText = $(lastTarget).parent().data('tooltipText');

// Show tooltip with the new text
if (currentText != newText) {
tooltip
.stop(true)
.css('opacity', 0)
.text(newText)
.animate({opacity: 1}, 1000);
}
}
}, 200);

// Hide tooltip when leaving menu
wrapper.mouseleave(function(){
lastTarget = false;
tooltip.stop(true).css('opacity', 0).text('');
});

/*
//Usage of hover event resulted in performance problems
scrollable.find('a').hover(function(){
tooltip
.stop()
.css('opacity', 0)
.text($(this).data('tooltipText'))
.animate({opacity: 1}, 1000);

}, function(){
tooltip
.stop()
.animate({opacity: 0}, 300);
});
*/
}
}

$(function(){
makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
});





function getsizes(s)
{
if(s=="s")
{
document.getElementById("size2").innerHTML="<option value=''>--Select--</option><option value='XXS'>XXS</option><option value='XS'>XS</option>";
}
else if(s=="m")
{
document.getElementById("size2").innerHTML="<option value=''>--Select--</option><option value='XL'>XL</option><option value='2XL'>2XL</option>";
}
else if(s=="l")
{
document.getElementById("size2").innerHTML="<option value=''>--Select--</option><option value='3XL'>3XL</option><option value='4XL'>4XL</option><option value='5XL'>5XL</option>";
}
else
{
document.getElementById("size2").innerHTML="<option value=''>--Select--</option>";
}

}
</script>
<style>
#size{width:70%; margin-bottom:10px;}
#size2{width:70%;}
#size option,#size2 option{padding:5px;}

</style>
</head>

<body>


<div id="main">
  <header> <strong>Barcode App</strong> </header>
  <div id="row">
    <div id="col60">
     <div id="row" style="margin-top:1%;  padding-left:5%;">
     <span style="text-align:center; font-style:">Dress Size</span><br/>
          <select id="size" onChange="getsizes(this.value)">
          <option value="">--Select--</option>
            <option  value="s">Small</option>
            <option  value="m">Medium</option>
            <option  value="l">Extra Large</option>
          </select>
          <select id="size2">
          <option value="">--Select--</option>
          </select>
          <label id="ar"></label>
      <!--    <button id="button">Check</button>-->
        </div>
     
      <div id="model"> <img class="dress" src="img/womanmodel.png"/> </div>
    </div>
    <div id="col40">
      <div class="dressname">
     
        <div id="row">
       
            <div class="sc_menu_wrapper">
<div class="sc_menu">
   <a title="Menu" class="draggable" href=""><img   src="img/dress/1.png" alt="Menu"/></a>

<a title="jQuery" class="draggable" href=""><img  src="img/dress/3.png" alt="jQuery"/></a>
   <a title="CSS" class="draggable" href=""><img  src="img/dress/4.png" alt="CSS"/></a>
   <a title="Vertical" class="draggable" href=""><img  src="img/dress/5.png" alt="Vertical"/></a>

</div>
</div>
         
         
        </div>
     
     
      </div>
    </div>
  </div>

</div>
<footer>
  <!--<div id="bview"> <strong>Back View</strong> </div>
  <div id="bview" class="fl"> <strong >Next</strong> </div>-->
</footer>
<!-- <script type="text/javascript">
      $.fn.draggable = function() {
        var offset = null;
        var start = function(e) {
          var orig = e.originalEvent;
          var pos = $(this).position();
          offset = {
            x: orig.changedTouches[0].pageX - pos.left,
            y: orig.changedTouches[0].pageY - pos.top
          };
        };
        var moveMe = function(e) {
          e.preventDefault();
          var orig = e.originalEvent;
          $(this).css({
            top: orig.changedTouches[0].pageY - offset.y,
            left: orig.changedTouches[0].pageX - offset.x
          });
        };
        this.bind("touchstart", start);
        this.bind("touchmove", moveMe);
      };

      $(".draggable").draggable();
    </script>
-->
</body>

</html>

State and City Two Drop Down with PHP Mysql AJax Code

Follow my blog with Bloglovin Two Drop Down with PHP Mysql AJax Code,Need to some basic syntax of ajax for call to ajax and need some basic jquery

1 – config.php

for connection to mysql

<?php
$connect = mysql_connect('localhost','root','');
if (!$connect) {
die('Could not connect to MySQL: ' . mysql_error());
 }
 mysql_select_db('test_database',$connect); ?>

2 – test.php

<?php
include('config.php');
?>
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){             
$("#country").change(function(){             
        var country = $("#country").val();
        if(country!='')
        {
        $.ajax({
        type:"post",
        url:"state.php",
        data:{country_code:country},
        cache: false,
        dataType:'html',
        success:function(data){
        if(data){
           $("#state").hide();
            $("#state_res").html(data); 
        }
        }
        });
 }
 });
 });
</script>
</head>
<body>
<table cellpadding="10" cellspacing="10" width="50%">
<tr>
<td>Select Country</td>
<td>
<td>
<select name="country" id="country" ><option>Select Country</option>
<?php 
$sql=mysql_query("Select * from country");
while($row=mysql_fetch_array($sql))
{ ?>
<option value="<?php echo $row['id']?>"><?php echo $row['country_name']?></option>
<?php }?>  </select>
</td>
<td>State</td>
<td>
<span id="state_res"></span>
<span id="state">
<select>
<option value="">Select State1</option>
</select>
</span>
</td>
</tr>    </table>
</body>
</html>

3 – state.php

<?php
include('config.php');
$id = $_REQUEST['country_code'];?>
<select name="state"  id="state">
        <option value="">Select State</option>
        <?php 
        $res = mysql_query("SELECT * from state where country_id=$id");
        while($row = mysql_fetch_assoc($res)){?>
        <option value="<?php echo $row['id'];?>"><?php echo $row['state_name'];?></option>
        <?php }?>
</select>