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

Question

以下是链接 - 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>

需要有关添加云缩放效果的帮助。它不适用于网站。我不明白为什么它不起作用。

帮帮我。提前谢谢。

Answer 1

使用jQuery你可以简单地：

1. 为每个小图片添加click个事件。

2. 点击图片后，将其src属性复制到大图片src属性。

$(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>