WordPress-单击时用缩略图替换主图像

Question

我正在尝试完成以下任务：我有一个具有多个图像的页面，1个大，是主要图像，然后是下面的几张图像，大小较小。我要做的是，当用户单击较小的图像之一时，该图像已加载并替换主产品图像。

我的一个页面之一是：http：//footybootsdb.com/adidas-x16-1/

我希望这在多个不同的页面上发生，因此可以在几个页面上实施的任何代码都将不胜感激。

该页面是使用WordPress的"页面构建器"插件配置的。

Answer 1

您可以使用JS进行。首先，通过这样的数据属性将大型图像的URL放在小型图像上：

<div id="divContainBigSizeImage">
    <img class="small-size" src="http://main-image.jpg"
</div>
<img class="small-size" src="http://image-with-small-size.jpg" data-big-size="http://image-with-big-size.jpg">
<img class="small-size" src="http://another-image-with-small-size.jpg" data-big-size="http://another-image-with-big-size.jpg">

然后，您可以将JS单击事件绑定到该图像以获得大型图像的URL。如果使用jQuery，则看起来像这样：

$('.small-size').on('click', function() {
    var bigSizeUrl = $(this).data('big-size'); // get the big-sized image's url
    var newImgHTML = '<img src="' + bigSizeUrl + '">'; // create an html element
    $('#divContainBigSizeImage').html(newImgHTML); // replace the current big-sized one
})

Answer 2

安装一个灯箱插件，当用户单击图像时，它将打开较大版本。