2016-09-29 27 views
0

這裏是鏈接 - 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> 

需要幫助添加雲變焦效果。它不適用於網站。我不明白爲什麼它不起作用。

幫幫我。提前致謝。

+0

歡迎SO。但是你的問題太廣泛了,你還沒有提供任何代碼來幫助我們幫助你。請分享更多信息。 – Abela

+0

你知道如何使用jquery嗎? –

+0

請檢查該網站,我需要的代碼,我將如何做。我是新的 –

回答

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>

+0

非常感謝。它運作良好。 :) –

+0

你能幫我嗎?我將如何在動態圖像上添加雲變焦? –

+0

如果你的意思是如何放大懸停的圖像,你可以看看這裏http://www.elevateweb.co.uk/image-zoom/examples –