add thumbnail preview about react-images HOT 9 CLOSED

Absolutely. This needs some planning, but is something that's been on my mind for a while

from react-images.

Flickr also implements this in context of a lightbox instead of gallery :
https://www.flickr.com/photos/neptunian/28167115654/in/photostream/

from react-images.

That's a nice implementation, I like the subtle drop shadow when the thumbnails are enlarged. Also, great shot 😉

from react-images.

Quick and basic test : http://tamago.fr/react-images/

Scrolls (not automatically yet) when there are too many thumbnails, uses "thumbnail" instead of "src" if given. Added onClickThumbnail (like onClickPrev/Next).

Could be easily changed to a "paginated" version like Flickr.

from react-images.

Dude, that's awesome! Looking forward to the PR

from react-images.

Just updated the version to also a second Thumbnails components : PaginatedThumbnails

In my current fork the thumbnails component can be passed to Lightbox, so you can write stuff like

<Lightbox 
    images={...}
    thumbnails={PaginatedThumbnails} />

If you need to pass some props to the thumbnail component, you can do it like this (not very intuitive)

<Lightbox 
    images={...}
    thumbnails={(props) => <PaginatedThumbnails {...props} offset={5} />} />

The code for this one is more complicated as it has some internal state to manage the "current page".

I guess I can do a PR, but it probably needs some discussion to see what API suits you best.

from react-images.

@jossmac do you have a gitter for this project ? I'll be doing some open source image components for my company and wanted to see if it's something that could be added to react-images or should be a separate project.

from react-images.

Just created https://gitter.im/react-images/Lobby

Yeah that'd be great. Just let me know what you're building and hopefully it can find its way back into this repo for the community 😄

from react-images.

+1

from react-images.