图片可放大查看

index.html

@@ -16,7 +16,12 @@
 		<link rel="stylesheet" href="css/main.css?v=2.2.6">
     <script src="js/viewer.min.js"></script>
 		<link  href="css/viewer.min.css" rel="stylesheet">
-    <script type="module" defer src="js/temp.js"></script>
+    <style>
+      .viewer-backdrop {
+        background-color: rgba(0,0,0,0.8);
+      }
+    </style>
+    <script type="module" defer src="js/side-content-viewer-logic.js"></script>
 	</head>
 	<div id='wx_pic' style='margin:0 auto;display:none;'>
 		<img id="weixin" src='images/matterportLogoColor.png' />

js/side-content-viewer-logic.js

@@ -0,0 +1,27 @@
+const sideImgEl = document.getElementById('sideimg')
+sideImgEl.addEventListener('click', () => {
+  const viewer = new Viewer(sideImgEl, {
+    title: false,
+    navbar: false,
+    toolbar: {
+      zoomIn: {
+        show: true,
+        size: 'large',
+      },
+      zoomOut: {
+        show: true,
+        size: 'large',
+      },
+      reset: {
+        show: true,
+        size: 'large',
+      }
+    },
+    hide() {
+      setTimeout(() => {
+        viewer.destroy()
+      }, 500);
+    },
+  });
+  viewer.show()
+})