search

pedropalau / react-bnb-gallery

Simple react-based photo gallery inspired by Airbnb image gallery.
https://peterpalau.github.io/react-bnb-gallery/
MIT License
216 stars 86 forks source link

Zoomable Images #21

Open casto101 opened 4 years ago

casto101 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

Good, thank you @casto101.

I am going to look into this for new releases.

ad-si commented 3 years ago

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!