Skip to content

Commit

Permalink
update hover and remove scroll (#4927)
Browse files Browse the repository at this point in the history
this pr updates the lightbox component and removes the scroll function.
currently, i'm seeing the hover even when scrolling and when stopping my
scroll state, leading to a weird ux and the hovered images getting in
the way of reading.

this pr removes the scroll function and tries to simplify the component.
it als adjusts the scale.
  • Loading branch information
mirnawong1 authored Feb 16, 2024
2 parents 8a04f2e + 703705a commit ab218c2
Showing 1 changed file with 12 additions and 14 deletions.
26 changes: 12 additions & 14 deletions website/src/components/lightbox/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,15 @@ function Lightbox({ src, collapsed = false, alignment = "center", alt = undefine
if (isHovered && !isScrolling) {
timeoutId = setTimeout(() => {
setExpandImage(true);
}, 200);
}, 200); // Delay for expanding image after hover
} else {
setExpandImage(false);
}
return () => clearTimeout(timeoutId);
}, [isHovered, isScrolling]);

const handleMouseEnter = () => {
setTimeout(() => {
if (!isScrolling) {
setIsHovered(true);
}
}, 300);
setIsHovered(true);
};

const handleMouseLeave = () => {
Expand All @@ -31,12 +29,12 @@ function Lightbox({ src, collapsed = false, alignment = "center", alt = undefine
};

const handleScroll = () => {
setIsScrolling(true);
setExpandImage(false);

setTimeout(() => {
setIsScrolling(false);
}, 300); // Delay to reset scrolling state
if (!isScrolling) {
setIsScrolling(true);
setTimeout(() => {
setIsScrolling(false);
}, 200); // Delay to reset scrolling state
}
};

useEffect(() => {
Expand Down Expand Up @@ -68,12 +66,12 @@ function Lightbox({ src, collapsed = false, alignment = "center", alt = undefine
alt={alt ? alt : title ? title : ''}
title={title ? title : ''}
src={imageCacheWrapper(src)}
style={expandImage ? { transform: 'scale(1.2)', transition: 'transform 0.5s ease', zIndex: '9999' } : {}}
style={expandImage ? { transform: 'scale(1.04)', transition: 'transform 0.3s ease' } : {}}
/>
</a>
</span>
{title && (
<span className={styles.title}>{ title }</span>
<span className={styles.title}>{title}</span>
)}
</div>
</>
Expand Down

0 comments on commit ab218c2

Please sign in to comment.