缩略图上的 jquery lightbox 单击更改主图像

Question

我正在为灯箱使用 jquery.fancybox-1.3.4.pack.js，在那个灯箱中我想使用一些 jquery。基本上，它是一个产品灯箱，左边有一张主图，右边有 3-4 个缩略图。

我希望当用户单击缩略图时，主图像应该根据拇指进行更改。

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

Answer 1

对您的 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);
});