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

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

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

，我想这在多个不同的页面出现，这样可以在多个页面中实现的任意代码，将不胜感激。

该页面是使用'Page Builder'插件为Wordpress配置的。

来源

2017-06-07 Standingbear123

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

来源

2017-06-07 00:46:34

你可以用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 
})

来源

2017-06-07 00:56:57

这可以在Wordpress中实现吗？ – Standingbear123

当然，队友，它的JavaScript，所以它不依赖于WordPress。我刚刚展示了一个简单的例子，它可以按照您的预期在您的问题中运行。但是，在现实生活中，我建议你可以使用滑块来实现。你可以参考这个[flex slider]（http://flexslider.woothemes.com/thumbnail-slider.html）例子，我认为它最接近你的要求。 –

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

回答

相关问题