feat: Add gap configuration item to zoom-image

_config.yml

@@ -683,6 +683,9 @@ zoom_image:
   # The color of mask.
   # (Please use "" to wrap the value)
   mask_color: "rgba(0,0,0,0.6)"
+  # The gap between image and a edge of screen when image is enlarged.
+  # (Only `px` unit is supported)
+  gap_aside: 20px
 
 # If you are use "photos" attribute in the Front-matter,
 #   you can enable this to show images in waterfalls flow.

docs/zh-CN/advanced/advanced-setting.md

@@ -943,6 +943,8 @@ zoom_image:
   enable: true
   # 遮罩的颜色
   mask_color: "rgba(0,0,0,0.6)"
+  # 图片放大时，距离屏幕边缘的间隙
+  gap_aside: 20px
 ```
 
 ::: tip

source/js/utils.js

@@ -448,20 +448,21 @@ Stun.utils = Stun.$u = {
         .clone()
         .addClass('zoomimg-clone');
 
+      var SIDE_GAP = parseInt(CONFIG.zoom_image.gap_aside || 20);
       var imgRect = this.getBoundingClientRect();
       var imgOuterW = $(this).outerWidth();
       var imgOuterH = $(this).outerHeight();
       var imgW = $(this).width();
       var imgH = $(this).height();
       var imgL = $(this).offset().left + (imgOuterW - imgW) / 2;
       var imgT = $(this).offset().top + (imgOuterH - imgH) / 2;
-      var winW = $(window).width();
-      var winH = $(window).height();
+      var winW = $(window).width() - SIDE_GAP * 2;
+      var winH = $(window).height() - SIDE_GAP * 2;
       var scaleX = winW / imgW;
       var scaleY = winH / imgH;
       var scale = (scaleX < scaleY ? scaleX : scaleY) || 1;
-      var translateX = winW / 2 - (imgRect.x + imgOuterW / 2);
-      var translateY = winH / 2 - (imgRect.y + imgOuterH / 2);
+      var translateX = winW / 2 - (imgRect.x + imgOuterW / 2) + SIDE_GAP;
+      var translateY = winH / 2 - (imgRect.y + imgOuterH / 2) + SIDE_GAP;
 
       $(this).addClass('zoomimg--hide');
       $('body')