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

Added Responsive thumbnail positions prop

Open astongemmy opened this issue 2 years ago • 1 comments

I used react-image-gallery some days ago and really loved it for the thumbnail position feature because it fitted my need at the moment. I later realized I didn't like the compact display on mobile devices since I had initially set my thumbnail position to left. The image in the main slider wasn't large enough. I created a custom method to have it adapt and be responsive the way I desired and thought it necessary to give back to this awesome team.

Modifications

thumbnailPosition prop is now thumbnailPositions New prop thumbnailPositions is of type object and contains multiple positions with viewport sizes as keys

Example

<ImageGallery
...
thumbnailPositions={ { 'xs': 'bottom', 'sm': 'top', 'md': 'left', 'lg': 'right', 'xl': 'right', '2xl': 'left' } }
...

Note: Default thumbnail position is bottom and thumbnailPositions object could be limited to the viewports you care about changing thumbnail position.

For instance, the implementation below would set the thumbnail position to default (bottom) for md and 2xl viewport sizes as their positions are not provided for in the prop.

<ImageGallery
...
thumbnailPositions={ { 'xs': 'bottom', 'sm': 'top', 'lg': 'right', 'xl': 'right' } }
...

Footnote: No new dependencies are required

astongemmy avatar Jun 02 '22 16:06 astongemmy

Hey, thanks for opening this PR, but id like to leave the direction of thumbnail position to the user and keep the lib simple. Adjusting thumbnail position based on viewport is logic that should be handled outside the library.

xiaolin avatar Jun 21 '22 18:06 xiaolin