拿現有的圖來示範下,雖然醜了點,但效果有達到就好。
圖片大小最好一致、且與大圖切齊,不然有大有小,排版不太好看(笑)。
可搭配elevatezoom.js來用,大圖加上放大鏡。
另外在手機版,大圖會重複出現,可在 Elementor 響應設定,讓大圖在手機版不呈現,或改CSS隱藏。
這樣切換手機版時,圖可全部顯示、不重複,很懶人作法。

大圖的HTML語法

<div id="big" class="zoomin-inner">
    <img src="https://blog.cwlove.idv.tw/wp-content/uploads/2019/01/image-18.png">
    </div>

小圖的HTML及jQuery語法

<div id="small">
    <img src="https://blog.cwlove.idv.tw/wp-content/uploads/2019/01/image-19.png">
</div>
<script>
    jQuery("#small img").click(function(){
        jQuery("#big img").prop("src",jQuery(this).prop("src"));
    });
</script>