Is there anyway to enable the lightbox zoom in/out the pictures about react-images HOT 14 CLOSED

The example was chosen on purpose ;-)

from react-images.

That would depend on the gallery and how the images are displayed. For example, if the gallery shows small square thumbnails, to have it "morph" into the full picture you'd have to know which part of the image is shown in the thumbnail (could be a face in the top right corner, not necessarily the center of the image).
Even for more classic galleries (like Flickr's) the images are sometimes slightly cropped left and right to avoid having to recompute each line on window resize.

In theory it would be possible to pass extra information to the Lightbox, like the source image's position in the window. That might not work for people who use a gallery component they don't control, could be tough to get the positions.

from react-images.

@GregoryPotdevin Thank you for your reply. So does that mean currently react-images doesn't support the zoom in/out feature? I think it is necessary to some extent, since when we view a picture of very large size, the picture will be down scaled and we cannot view it in detail without zooming in it.

from react-images.

Actually I think I completely (really) misunderstood what you wanted ^^ You don't want to zoom images from the grid to the lightbox (while opening), you just want to zoom on images once open and pan around ? Like Flickr does ? https://www.flickr.com/photos/albertdros/29188487546/in/explore-2016-08-25/
(I love how it just moves around when you move your mouse, with no drag'n'drop, though you can't control the zoom level).

That should be possible to add.
@jossmac Is this on your roadmap ? Would you like a PR for something like this or is it too much for react-images ? An alternative would be to have an "imageComponent" prop which could resize a "ZoomableImage" component ^^

from react-images.

@GregoryPotdevin yes, what I want is something like the Flickr does. The movement way of flickr is really cool! If the zoom level can be controlled, that will be awesome.

from react-images.

Hi guys, I'm on holidays at the moment and don't have my laptop. I'll check this out when I get back

It sounds like this could be a useful feature, though I'm concerned about bloat in what was originally a simple component

from react-images.

@jossmac that's where the "pluggable components" approach I was talking about a while back could be interesting. Add in a prop to bypass the default image component, and then someone can post a "ZoomableImage" component on npm that could be used with react-images.

from react-images.

So the images prop would just accept an array of whatever the consumer wants to pass through?

That could be possible now I've re-implemented the layout using flexbox; though we lose the ability to apply inline styles, specifically maxHeight: calc(100vh - ${heightOffset}) which is critical to making it responsive. Hmm...

from react-images.

More like <Lightbox images={[...]} imageRenderer={ZoomableImage] />. Kind of like how you can pass options/value renderers to react-select to have custom displays.
Maybe the maxHeight can be set on a container div and the image inside takes 100% height ?

from react-images.

About to head into a meeting with @JedWatson right now re: KeystoneJS, I'll see what he has to say about it :)

from react-images.

I've sold @jossmac on how this would work, seems like it would be a good fit for react-images.

Probably allow users to replace thumbnailComponent and imageComponent?

from react-images.

My initial PR for the thumbnails already had a thumbnails component prop and 2 different thumbnail implementations (for testing, the paginated and non-paginated ones) but apparently that didn't make it after merge
https://github.com/GregoryPotdevin/react-images/blob/8090a6cd02c2e90fd99fa123382a290435f9f287/src/Lightbox.js#L247

    renderThumbnails() {
        const { images, currentImage, onClickThumbnail, thumbnails:ThumbnailsComponent } = this.props
        if (!ThumbnailsComponent) return null
        return <ThumbnailsComponent images={images}
                                currentImage={currentImage}
                                onClickThumbnail={onClickThumbnail} />
        }

from react-images.

Has this issue moved forward at all? I love this simple design but would really appreciate the ability to zoom.

from react-images.

@mjvalade no i don't think this will be implemented by this library. instead we should focus on issue #54 where the user can pass in a custom component that has zoom if so desired. there are too many possible features to implement such as favoriting, custom captioning, annotations, video, etc and it would best to be broken off into custom image or possibly content components.

from react-images.