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的 - 點擊時用縮略圖替換主圖像

回答

相關問題