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

Question

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.

Answer 1

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>