Abhijit Dutta Abhijit Dutta - 2 months ago 12
CSS Question

Cloud Zoom Effect in product thumbnail dynamic images

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

Using Jquey 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>

Comments