react-image-gallery
react-image-gallery copied to clipboard
Added Responsive thumbnail positions prop
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
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.