feat(image-zoom): add minimal image zoom functionality #828
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Introduced CSS for image zoom overlay and image styling. - Implemented JavaScript for handling image zoom interactions, including overlay creation and close functionality. - Updated configuration to enable image zoom feature in site parameters. - Added partial for including image zoom assets in the layout.
✅ Deploy Preview for hugo-hextra ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
…ns and closing behavior - Updated CSS for smoother transitions and added closing effects for the zoom overlay. - Enhanced JavaScript to support dedicated closing transitions and improved event handling for dismissing the overlay. - Removed unnecessary scroll lock and overflow styles for better user experience.
…tionality - Added support for pinch gestures to enhance the zoom experience on touch devices. - Implemented event listeners for pointer events to manage pinch start and end. - Updated closing behavior to account for active pinch gestures, improving user interaction.
Contributor
|
🤔 currently, this breaks the cards with images. |
…improved interactions - Updated CSS to include loading indicators and refined transition effects for zoomed images. - Enhanced JavaScript to manage image loading states, ensuring a smoother user experience during zoom interactions. - Improved gesture handling for touch devices, including better management of pinch and drag events.
- Added `will-change: transform` to CSS for better performance during zoom. - Enhanced JavaScript to support tap detection for closing the zoom overlay with minimal movement. - Updated zoom behavior to ensure scaling occurs from the center of the overlay. - Refined event handling to prevent unintended interactions and improve user experience.
- Updated logic to prevent dragging when a single touch is detected, improving tap detection accuracy. - Adjusted event handling to ensure significant movement cancels tap only when necessary, enhancing user experience.
Owner
Author
|
bugbot run |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
This PR is being reviewed by Cursor Bugbot
Details
You are on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle.
To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.
- Introduced minimum and maximum scale limits for zoom functionality to prevent excessive scaling. - Enhanced gesture state management for pinch and drag interactions, improving user experience during zoom. - Updated event handling to ensure smoother transitions between single and multi-touch interactions, including better tap detection logic. - Adjusted logic to maintain consistent pan behavior during zoom adjustments, ensuring a more intuitive interaction.
|
I need this feature; it's very helpful for displaying documents. 🙏 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Preview: https://deploy-preview-828--hugo-hextra.netlify.app/docs/guide/markdown/#images