产品缩略图动态图像中的云缩放效果

Here is the link - http://demo.crazewebconsultants.net/bag/product-details.php?id=MQ==

$(document).ready(function(){
   $('.prodsmallimg .img-responsive').click(function(){
      $(".proddtlsimg img").attr("src",$(this).attr("src"));
   });
});
.col-lg-5 {
    width: 41.6667%;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9 {
    float: left;
}
.proddtlsimg {
    margin: 10px 0 20px;
    padding: 20px;
    width:150px;
     height:150px;
}
.proddtlsimg img {
    margin: 0 auto;
    width:100%;
}
.prodsmallimg {
    border: 1px solid #cdcdcd;
    display: inline-block;
    padding: 15px;
    cursor:pointer;
     width:80px;
     height:80px;
}
.prodsmallimg img {
    margin: 0 auto;
   width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
                    <div class="proddtlsimg">
                        <img class="img-responsive" src="http://demo.crazewebconsultants.net/bag/site-admin/uploaded_files/product/1474450814-prodimg2.jpg">
                    </div>
                    <div class="row" style="width:500px">
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                            <div class="prodsmallimg">
                                <img class="img-responsive" src="http://demo.crazewebconsultants.net/bag/site-admin/uploaded_files/product/featured/1474450814prodsmallimg1.png">
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                            <div class="prodsmallimg">
                                <img class="img-responsive" src="http://demo.crazewebconsultants.net/bag/site-admin/uploaded_files/product/featured/1474450814prodsmallimg2.png">
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                            <div class="prodsmallimg">
                                <img class="img-responsive" src="http://demo.crazewebconsultants.net/bag/site-admin/uploaded_files/product/featured/1474450814prodsmallimg3.png">
                            </div>
                        </div>

                      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                            <div class="prodsmallimg">
                                <img class="img-responsive" src="http://demo.crazewebconsultants.net/bag/site-admin/uploaded_files/product/1474450814-prodimg2.jpg">
                            </div>
                        </div>
                    </div>
                </div>

Need help for adding cloud zoom effect. It not works on website. I'm not understand why it is not working.

Help me out. Thanks in advance.

Using jQuery you can simply :

1. Add a click event for each small image .

2. Once an image is clicked copy its src attribute to the big image src attribute.

$(document).ready(function(){
   $('.prodsmallimg .img-responsive').click(function(){
      $(".proddtlsimg img").attr("src",$(this).attr("src"));
   });
});

.col-lg-5 {
    width: 41.6667%;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9 {
    float: left;
}
.proddtlsimg {
    margin: 10px 0 20px;
    padding: 20px;
    width:150px;
     height:150px;
}
.proddtlsimg img {
    margin: 0 auto;
    width:100%;
}
.prodsmallimg {
    border: 1px solid #cdcdcd;
    display: inline-block;
    padding: 15px;
    cursor:pointer;
     width:80px;
     height:80px;
}
.prodsmallimg img {
    margin: 0 auto;
   width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
                    <div class="proddtlsimg">
                        <img class="img-responsive" src="http://demo.crazewebconsultants.net/bag/site-admin/uploaded_files/product/1474450814-prodimg2.jpg">
                    </div>
                    <div class="row" style="width:500px">
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                            <div class="prodsmallimg">
                                <img class="img-responsive" src="http://demo.crazewebconsultants.net/bag/site-admin/uploaded_files/product/featured/1474450814prodsmallimg1.png">
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                            <div class="prodsmallimg">
                                <img class="img-responsive" src="http://demo.crazewebconsultants.net/bag/site-admin/uploaded_files/product/featured/1474450814prodsmallimg2.png">
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                            <div class="prodsmallimg">
                                <img class="img-responsive" src="http://demo.crazewebconsultants.net/bag/site-admin/uploaded_files/product/featured/1474450814prodsmallimg3.png">
                            </div>
                        </div>
                      
                      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                            <div class="prodsmallimg">
                                <img class="img-responsive" src="http://demo.crazewebconsultants.net/bag/site-admin/uploaded_files/product/1474450814-prodimg2.jpg">
                            </div>
                        </div>
                    </div>
                </div>

</div>