公司網站主要是用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”