US4 - Lightbox gallery

[KevinBlbd]

Value proposition

As a user I want to click on the picture on the detail page in order to access the picture in a bigger version.

Description

Acceptance criteria

• [ ] clicking on the picture of the details page open a lightbox gallery in a pop-up
• [ ] the lightbox pop-up can be closed by clicking the back arrow on the top left corner
• [ ] the picture in the lightbox let the user zoom/dezoom, drag the picture

Tasks

• [ ] create and integrate the lightbox component
• [ ] connect the dummy pictures from the homepage to the lightbox component
• [ ] place the button to close the lightbox pop-up on top-left
• [ ] gesture implementation to let user zoom, pinch (zoom), drag (navigate)

Size: M

[CJAkkuec]

Here's a nit-picky little UI/UX sidenote: the x goes in the top right corner. ;) You may also want to adjust the size to M, because implementing gestures (pinch, drag, zoom, etc) yourself can be a bit of a headache. You may also want to include gesture implementation into the tasks, as well as finding a package/library for it.

[KevinBlbd]

Thanks for the feedback! Ooopsie, it was suppose to be a back-arrow 😅 I will re-think about the necessity of integrating the lightbox on week 1, maybe as a "bonus" implementation only.

I found this : https://yet-another-react-lightbox.com/ including pluggins for the Captions, Fullscreen, Slideshow, Thumbnails, Video and Zoom.