jquery lightbox on thumbnail click change Основное изображение

Я использую jquery.fancybox-1.3.4.pack.js для лайтбокс и в этом лайтбокс я хочу использовать некоторые jquery. В основном, это лайтбокс продукта слева, есть основное изображение, а справа - 3-4 эскиза.jquery lightbox on thumbnail click change Основное изображение

Я хочу, когда пользователь нажимает на миниатюры, основное изображение должно быть изменено в соответствии с большим пальцем.

<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

Я хочу написать сценарий для лайтбокса для моего html-кода. Как упоминалось выше, есть большой эскиз, который является основным изображением и этим изображением в вызове в этом (

), и в этом html-коде есть три эскиза, когда будет нажата любая из миниатюр, основное изображение должно быть изменено, а активный класс должен добавьте в (li) этого миниатюры. – Gagan

'Я хочу написать сценарий' ... это хорошо. Затем сделайте это и покажите свой код и попросите о помощи для части, которая не работает (stackoverflow - это не поваренная книга или клуб обезьян кода;) – JFK

С небольшими изменениями в вашем 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 lightbox on thumbnail click change Основное изображение

ответ

Смежные вопросы