Question

我正在尝试完成以下任务：我有一个页面有几个图像，1个很大，是主要图像，然后是几个尺寸较小的图像。我想要做的是，当用户点击其中一个较小的图像时，该图像被加载并替换主产品图像。

我的某个网页的示例是：http://footybootsdb.com/adidas-x16-1/

我希望这可以在多个不同的页面上进行，因此可以在多个页面上实现任何代码。

该页面使用＆＃39; Page Builder＆＃39;进行配置。 Wordpress的插件。

Answer 1

你可以用js来做。首先通过数据属性在小尺寸图像上放置一个大尺寸图像的网址，如下所示：

<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点击事件绑定到该图像以获得大尺寸图像的网址。如果使用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

安装灯箱插件，当用户点击图片时，它会打开更大的版本。

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

2 个答案: