Skip to content
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.

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

Zoomable Images #21

Open
casto101 opened this issue Sep 30, 2019 · 4 comments
Open

Zoomable Images #21

casto101 opened this issue Sep 30, 2019 · 4 comments
Labels
enhancement New feature or request
Milestone

Comments

@casto101
Copy link

Hi there, thank you so much for this package! My team is using the ReactBnbGallery but we have some tall and narrow images with text that need to be zoomed in on to be visible. It would be awesome to be able to pass a zoom option to GalleryPhoto. Alternatively, maybe Gallery could accept children and render a different image component instead of GalleryPhoto so that it could be zoomed?

@pedropalau
Copy link
Owner

Hi there, thank you so much for this package! My team is using the ReactBnbGallery

Hi @casto101, thank you and your team for using this component.

but we have some tall and narrow images with text that need to be zoomed in on to be visible.

Could you please give me an example of what is happening to understand better this issue?

It would be awesome to be able to pass a zoom option to GalleryPhoto.

I think that I have an idea of it but it could be very useful if you can provide an image or a demo.

Alternatively, maybe Gallery could accept children and render a different image component instead of GalleryPhoto so that it could be zoomed?

Good idea, sounds like a feature and could be very helpful for other people.

@casto101
Copy link
Author

casto101 commented Oct 1, 2019

This is an example of our use case. The image in the app is high resolution (1261px x 10861px), but due to its dimensions you really can't see what's in the image without zooming in.
Screen Shot 2019-10-01 at 9 29 56 AM
I think an ideal UX would be similar to Google Maps, where there is a zoom in/out button in the controls, and it would be great if we could magnify to close to the image's original size. I've done some research on other libraries, and found that some also use native-like gestures to manage the zoom interaction. React Spring Lightbox is an example that uses the mousewheel and pinch to zoom. I also think it would be possible to use a different image rendering library (one with magnification) alongside React Bnb Gallery if you wanted to modify Gallery or GalleryPhoto to be a wrapper for a passed in image component.

@pedropalau
Copy link
Owner

Good, thank you @casto101.

I am going to look into this for new releases.

@pedropalau pedropalau added the enhancement New feature or request label Oct 2, 2019
@pedropalau pedropalau added this to the v2 milestone Jun 25, 2020
@ad-si
Copy link

ad-si commented May 6, 2021

I'm having the same issue. Some way to zoom into the images would be really cool. Could maybe also be achieved with a loupe!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants