diff --git a/src/components/Slideshow.tsx b/src/components/Slideshow.tsx index 6ace401..930cd3a 100644 --- a/src/components/Slideshow.tsx +++ b/src/components/Slideshow.tsx @@ -150,6 +150,7 @@ const Slideshow: React.FC = () => { className={styles.imageWrapper} style={{ transform: `scale(${scale})`, + cursor: isFullscreen ? "zoom-in" : "pointer", // Modify cursor based on fullscreen state }} onClick={toggleFullscreen} > diff --git a/src/hooks/useSlideshow.ts b/src/hooks/useSlideshow.ts index 2145762..5c57817 100644 --- a/src/hooks/useSlideshow.ts +++ b/src/hooks/useSlideshow.ts @@ -36,7 +36,7 @@ export const useSlideshow = ( const pauseSlideshow = useCallback(() => { setIsPaused(true); - if (!isFullscreen) { + if (isFullscreen) { setScale(baseScale); } }, [isFullscreen]); @@ -48,16 +48,17 @@ export const useSlideshow = ( const handleWheel = useCallback( (event: WheelEvent) => { - if (isPaused) { + if (isPaused && isFullscreen) { + // Add isFullscreen check here event.preventDefault(); const delta = event.deltaY * -0.002; setScale((prevScale) => { const newScale = prevScale + delta; - return Math.min(Math.max(newScale, baseScale), maxScale); // Using maxScale here + return Math.min(Math.max(newScale, baseScale), maxScale); }); } }, - [isPaused], + [isPaused, isFullscreen], // Add isFullscreen to dependencies ); const handleTouchStart = useCallback( diff --git a/src/styles/Slideshow.module.css b/src/styles/Slideshow.module.css index b5f1051..cc76f67 100644 --- a/src/styles/Slideshow.module.css +++ b/src/styles/Slideshow.module.css @@ -52,11 +52,15 @@ transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); width: 100%; height: 100%; - cursor: zoom-in; + cursor: pointer; /* Default cursor */ } .fullscreen .imageWrapper { - cursor: zoom-out; + cursor: zoom-in; /* Only show zoom cursor in fullscreen */ +} + +.fullscreen .imageWrapper[style*="scale"] { + cursor: zoom-out; /* Show zoom-out cursor when zoomed in fullscreen */ } .loading { @@ -71,6 +75,7 @@ .mainImage { opacity: 0; transition: opacity 0.3s ease; + border-radius: 20px; } .mainImage.loaded {