WordPress：引入elevatezoom.js，讓圖片加上放大鏡

公司網站主要是用Elementor 編輯做成，雖然WordPress 上有外掛可放大圖片，但Elementor上似乎沒看到？公司需求是點小圖切換大圖、圖能加上放大鏡功能。因此找到elevatezoom.js來協助達成。
官網及語法參考：http://www.elevateweb.co.uk/image-zoom

首先引入elevatezoom.js，便是將js檔上傳到WordPress目錄裡，再來用Simple Custom CSS and JS，自訂HTML引入

<script type="text/javascript" src="/jquery.elevatezoom.js"></script>

再來下jQuery語法，一樣可用Simple Custom CSS and JS

jQuery(document).ready(function( $ ){
#在圖右側放大
    jQuery(".zoomin img").elevateZoom({
        zoomWindowWidth:300, 
        zoomWindowHeight:300
    });
#在圖左側放大
jQuery(".zoomin-left img").elevateZoom({
    zoomWindowPosition:11,
    zoomWindowWidth:300,
    zoomWindowHeight:300});
#在圖內放大
jQuery(".zoomin-inner img").elevateZoom({
constrainType:"height", constrainSize:274, zoomType: "lens", containLensZoom: true, gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: "active"
    });
});

最後將需要的圖片依需求，類別class=”zoomin” or “zoomin-left” or “zoomin-inner”