Skip to content

Gallery Enhancement #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 27, 2025
Merged

Gallery Enhancement #10

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0cfe1b6
Resolve merge conflicts in Gallery page
Aritra203 May 27, 2025
90e2664
Merge branch 'coding-junction:main' into main
Aritra203 May 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 0 additions & 12 deletions app/Gallery/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ const getImageWidth = () => {
const Gallery = () => {
const controls = useAnimation();
const [isPaused, setIsPaused] = useState(false);
<<<<<<< HEAD
const [offset, setOffset] = useState(0);
const [imageWidth, setImageWidth] = useState(getImageWidth());

Expand All @@ -41,9 +40,6 @@ const Gallery = () => {
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);
=======
const [offset, setOffset] = useState(0); // offset in px
>>>>>>> f44a310707bb1d1606c8f6f0471ed10d89ff7476

// Start animation
useEffect(() => {
Expand All @@ -66,27 +62,19 @@ const Gallery = () => {
// When hover/tap, set offset so hovered image is first
const handleMouseEnter = (idx: number) => {
setIsPaused(true);
<<<<<<< HEAD
setOffset(-idx * imageWidth);
controls.set({ x: -idx * imageWidth });
=======
setOffset(-idx * IMAGE_WIDTH);
controls.set({ x: -idx * IMAGE_WIDTH });
>>>>>>> f44a310707bb1d1606c8f6f0471ed10d89ff7476
};

// On leave, resume animation from current offset
const handleMouseLeave = () => {
setIsPaused(false);
<<<<<<< HEAD
};

// For mobile: handle tap to pause and focus image
const handleTouch = (idx: number) => {
handleMouseEnter(idx);
setTimeout(() => setIsPaused(false), 2000); // Resume after 2s
=======
>>>>>>> f44a310707bb1d1606c8f6f0471ed10d89ff7476
};

return (
Expand Down