滑鼠點擊小圖時自動變換不同大圖(1)
2022-08-03
尚無留言
前言
點擊小圖時，就自動切換一張對應的大圖。(大小圖可以同一張)
運用範圍
作品集、房屋物件、家具展覽等等。
預覽效果
請將滑鼠點擊每一小圖，上方圖片會跟替變化。
實作方法
1.建立資料區
(1)假設有5張圖要呈現，假設是圖a、圖b、圖c、圖d、圖e。
(2)先拉上下兩個段，上面的段只放一張大圖(圖a), 在圖片的樣式中把寬度調大成適當的尺寸。
(3)另下面的段切成任意欄數(這邊是5個欄)，裡面每個欄各放1張圖片(圖a、圖b、圖c、圖d、圖e)
所以圖a一開始會出現2次。
2.賦予CSS類別
第1個段的” 進階/css類別”填入「bigimg」。
第2個段的” 進階/css類別”填入「smallimg」。
3.貼上語法
在第二個段的下方拉一個html工具，貼上下列程式碼即可。
<script>
( function($) {
$(window).load(function() {
$(".smallimg img").on("click", function() {
// 取得圖片的完整 HTML
var b = jQuery(this).prop("outerHTML");
// 或更新目標元素的內容
$(".bigimg img").replaceWith(b); // 用新圖片替換
});
$('.smallimg img').css("cursor","pointer");
}); //end load
})(jQuery);
</script>
總結
兩個段也可以調成左右並排的，善用Elementor左邊工具區的”Inner Section”就可以做出比較多格並排的切版。
