9/7補:因網站不再使用 Elementor 故以下圖片原本會點小圖切換,移除 Elementor 失效了

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





大圖的HTML語法

<div id="big">
    <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>

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *