缩略图点击jQuery灯箱更改主图像

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>

- Gagan

---

那么问题是什么？ - JFK

我想为我的HTML代码编写一个灯箱脚本。如上所述，有一个大缩略图作为主要图像，并且该图像在此（<div class="left"></div>）中调用。在该HTML代码中有三个缩略图，当单击其中任何一个缩略图时，主图像应更改，并且应在该缩略图的（li）中添加一个活动类。 - Gagan

我想写一个脚本...很好。那就开始写吧，然后展示你的代码并寻求帮助，解决不起作用的部分（stackoverflow不是一个食谱或者码农俱乐部 ;)）。 - JFK

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);
});

- Matías Cánepa