react-bnb-gallery icon indicating copy to clipboard operation
react-bnb-gallery copied to clipboard

Published 20 hours ago • verified publisher icon pedropalau

Zoomable Images

Open casto101 opened this issue 6 years ago • 4 comments

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?

casto101 avatar Sep 30 '19 20:09 casto101

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.

pedropalau avatar Oct 01 '19 12:10 pedropalau

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.

casto101 avatar Oct 01 '19 16:10 casto101

Good, thank you @casto101.

I am going to look into this for new releases.

pedropalau avatar Oct 02 '19 17:10 pedropalau

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!

ad-si avatar May 06 '21 18:05 ad-si