diff --git a/app/profile/[mid]/page.js b/app/profile/[mid]/page.js
index 369c88f..399c54f 100644
--- a/app/profile/[mid]/page.js
+++ b/app/profile/[mid]/page.js
@@ -36,6 +36,7 @@ export default function PersonSpace() {
   const [visible, setVisible] = useState(false);
   const [isFollow, setIsFollow] = useState(false);
   const [topPhotos, setTopPhotos] = useState([]);
+  const currentIndex = useRef();
   // 获取屏幕高度
   // const scrollHeight = 600;
   useEffect(() => {
@@ -44,9 +45,69 @@ export default function PersonSpace() {
     getRelationData();
   }, []);
   const showPhotos = (photos, index) => {
+    currentIndex.current = index;
+    const interval = setInterval(() => {
+      console.log("bbbbbb")
+      const bodyBox = document.getElementsByClassName("photos-bodyBox")[0];
+      if (bodyBox) {
+        bodyBox.firstChild.lastChild.style.transform = `translateX(-${
+          currentIndex.current * (window.innerWidth + 16)
+        }px)`;
+        // console.log(bodyBox.firstChild.lastChild.style.transform);
+      }
+    }, 400);
+
+    
+    handleShowImages(index, photos, interval);
+
+    // setVisible(true)
+    // console.log(imagesMaskRef.current);
+    // imagesMaskRef.current.show(
+    //   photos.map((item) => item?.url),
+    //   index
+    // );
+  };
+  const handleShowImages = (index, photos, interval) => {
+    const mediaDom = document.createElement("div");
+    mediaDom.style.width = "100vw";
+    document.body.appendChild(mediaDom);
+    mediaDom.className = `${
+      photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
+    }`;
+    ImageViewer.clear();
     ImageViewer.Multi.show({
       images: photos.map((item) => item.url),
       defaultIndex: index,
+      // renderFooter: (image, index) => {
+      //   return renderFooter(photos[index]?.type == "hid", mediaDom);
+      // },
+
+      getContainer: mediaDom,
+      onIndexChange: (index) => {
+        currentIndex.current = index;
+        mediaDom.className = `${
+          photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
+        }`;
+        const leftBtn = document.getElementsByClassName("imagesBtnsControllerLeft")[0]
+        const rightBtn = document.getElementsByClassName("imagesBtnsControllerRight")[0]
+        if(leftBtn && rightBtn){
+          if(!index){
+            leftBtn.style.opacity=0.5
+            rightBtn.style.opacity=1
+          }else if(index==photos.length-1){
+            leftBtn.style.opacity=1
+            rightBtn.style.opacity=0.5
+          }else{
+            leftBtn.style.opacity=1
+            rightBtn.style.opacity=1
+          }
+        }
+      },
+      afterClose: () => {
+        mediaDom.remove();
+        clearInterval(interval);
+      },
+      classNames: { body: "photos-bodyBox" },
     });
   };
   const handleGetStreamerInfo = async () => {
diff --git a/app/space/person_space_introduce/[mid]/page.js b/app/space/person_space_introduce/[mid]/page.js
index 5ebf0ef..89c6547 100644
--- a/app/space/person_space_introduce/[mid]/page.js
+++ b/app/space/person_space_introduce/[mid]/page.js
@@ -23,6 +23,7 @@ export default function PersonSpaceIntroduce() {
   const [visible, setVisible] = useState(false);
   const [data, setData] = useState(null);
   const [isLoading, setIsloading] = useState(true);
+  const currentIndex = useRef();
   const { mid } = useParams();
   useEffect(() => {
     if (contentBox.current) {
@@ -39,9 +40,69 @@ export default function PersonSpaceIntroduce() {
     });
   }, []);
   const showPhotos = (photos, index) => {
+    currentIndex.current = index;
+    const interval = setInterval(() => {
+      console.log("bbbbbb")
+      const bodyBox = document.getElementsByClassName("photos-bodyBox")[0];
+      if (bodyBox) {
+        bodyBox.firstChild.lastChild.style.transform = `translateX(-${
+          currentIndex.current * (window.innerWidth + 16)
+        }px)`;
+        // console.log(bodyBox.firstChild.lastChild.style.transform);
+      }
+    }, 400);
+
+    
+    handleShowImages(index, photos, interval);
+
+    // setVisible(true)
+    // console.log(imagesMaskRef.current);
+    // imagesMaskRef.current.show(
+    //   photos.map((item) => item?.url),
+    //   index
+    // );
+  };
+  const handleShowImages = (index, photos, interval) => {
+    const mediaDom = document.createElement("div");
+    mediaDom.style.width = "100vw";
+    document.body.appendChild(mediaDom);
+    mediaDom.className = `${
+      photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
+    }`;
+    ImageViewer.clear();
     ImageViewer.Multi.show({
-      images: photos.map((item) => item.urls[0]),
+      images: photos.map((item) => item?.urls[0]),
       defaultIndex: index,
+      // renderFooter: (image, index) => {
+      //   return renderFooter(photos[index]?.type == "hid", mediaDom);
+      // },
+
+      getContainer: mediaDom,
+      onIndexChange: (index) => {
+        currentIndex.current = index;
+        mediaDom.className = `${
+          photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
+        }`;
+        const leftBtn = document.getElementsByClassName("imagesBtnsControllerLeft")[0]
+        const rightBtn = document.getElementsByClassName("imagesBtnsControllerRight")[0]
+        if(leftBtn && rightBtn){
+          if(!index){
+            leftBtn.style.opacity=0.5
+            rightBtn.style.opacity=1
+          }else if(index==photos.length-1){
+            leftBtn.style.opacity=1
+            rightBtn.style.opacity=0.5
+          }else{
+            leftBtn.style.opacity=1
+            rightBtn.style.opacity=1
+          }
+        }
+      },
+      afterClose: () => {
+        mediaDom.remove();
+        clearInterval(interval);
+      },
+      classNames: { body: "photos-bodyBox" },
     });
   };
   const handleShowVideo = (video) => {