jQuery的燈箱縮略圖點擊更改主圖像

我正在使用jquery.fancybox-1.3.4.pack.js的燈箱和在該燈箱我想使用一些jQuery。基本上，這是一個產品燈箱左側有一個主要圖像，右側有3-4個縮略圖。jQuery的燈箱縮略圖點擊更改主圖像

我想要當用戶點擊縮略圖主圖像應根據拇指改變。

<div class="product-lightBox"> 
      <img src="images/lb-brand-logo.jpg"> 
      <div class="product"> 

       <div class="left"> 
        <img src="images/lb-product-img.jpg"> 
        <img src="images/lb-product-img.jpg"> 
        <img src="images/lb-product-img.jpg"> 
       </div> 

       <div class="right"> 
        <div class="row"> 
         <h5>Product<span>2088</span></h5> 
        </div> 
        <div class="row"> 
         <h5>Color</h5> 
         <ul class="color"> 
          <li><a href="#"><img src="images/lb-thumb-img1.jpg"><span>Black<img src="images/color-pointer.png"></span></a></li> 
          <li><a href="#"><img src="images/lb-thumb-img2.jpg"><span>Red<img src="images/color-pointer.png"></span></a></li> 
          <li><a href="#"><img src="images/lb-thumb-img3.jpg"><span>Brown<img src="images/color-pointer.png"></span></a></li> 
         </ul> 
        </div> 
        <div class="row"> 
         <h5>Size<span>5 - 11</span></h5> 
        </div> 
        <div class="row"> 
         <h5>Prize<span class="price">INR 999</span></h5> 
        </div> 
        <div class="des"> 
         <h4>Description</h4> 
         <div class="clear"></div> 
         <div class="detail"> 
          <p>This is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum</p> 
         </div> 
        </div> 
       </div> 

       <div class="clear"></div> 

       <img src="images/lb-social-icons.jpg"> 

      </div> 
     </div>

來源

2013-04-10 Gagan

所以究竟是什麼問題？ – JFK 2013-04-10 20:12:56

我想爲我的html代碼在Lightbox中編寫一個腳本。如上所述，有一個很大的縮略圖，它是一個主要圖像，在這個調用中的圖像（

）和在那個html代碼中有三個縮略圖，當任何一個縮略圖被點擊時，主圖像應該被改變，一個活動類應該被改變在該縮略圖的（li）中添加。 – Gagan 2013-04-11 09:11:10

'我想寫一個腳本......這很好。然後做到這一點，並顯示你的代碼，並尋求幫助不工作的部分（stackoverflow不是一本食譜或一組代碼猴子;） – JFK 2013-04-11 15:22:36

稍加修改你的HTML：

添加數據屬性縮略圖

<img src="images/lb-thumb-img1.jpg" data-image="images/lb-big-img1.jpg">

然後做這樣的事情：

$(".color img").click(function() 
{ 
    var image = $(this).data("image"); 
    $(".left img").attr("src", image); 
});

來源

2013-04-13 03:26:52

jQuery的燈箱縮略圖點擊更改主圖像

回答

相關問題