[feature]: Implement Image gallery with zoom

[binucorra]

Description
Implement Zoom gallery in product detail page
Packages used
React magnify: https://www.npmjs.com/package/react-image-magnify
React Slick: https://www.npmjs.com/package/react-slick

Please let us know what packages this feature is in regards to:

• venia-concept
• pwa-buildpack
• peregrine
• pwa-devdocs
• upward-js
• upward-spec

[sirugh]

@soumya-ashok can you comment one way or other as to whether we want to add the "zoom" feature to our PDP images? If so we should discuss that here before you rework your PR @binucorra

[soumya-ashok]

@sirugh The design has an affordance for the zoom functionality on the PDP per this mockup - https://magento.invisionapp.com/share/YGOC5FM6EBQ

We have never discussed how we would like this functionality to work. Are we able to allow pinch-zoom on Venia?

[sirugh]

Pinch and zoom currently works on mobile through the native browser "magnifying" the page. I can show you in person if you like. This specific issue that was opened, based on the PR, seems to be wanting zooming on desktop.

[soumya-ashok]

@binucorra After discussion with @sirugh the direction we would like to adopt for the desktop zoom feature is to click the zoom icon, which will open a full screen gallery view with thumbnails, similar to what happens when you click the product image here - https://www.westelm.com/products/modern-industrial-metal-wood-writing-desk-h3541/?pkey=coffice-desks&isx=0.0 or with any products on Amazon with the option to further zoom in the gallery view.

In addition to static images, we would need to support videos.

We would not include zoom on hover.

This is not a feature that the team currently has on its priority list, but we are open to receiving contributions. If you would like to work on this feature, I'll be happy to provide a mockup and have a discussion on the interactions needed.

[binucorra]

@soumya-ashok
Thanks for following this issue. I'd like to continue my contributions. Please provide the mockup.

[soumya-ashok]

@binucorra Sounds good, I should be able to work on this next week. @sirugh Should we open a new issue with the mockups?

[sirugh]

@soumya-ashok no need, just edit this one.

[binucorra]

Yes, @soumya-ashok Please edit this one.

[sirugh]

@magento export issue to JIRA project PWA as Story

[github-jira-sync-bot]

✅ Jira issue https://jira.corp.magento.com/browse/PWA-1753 is successfully created for this GitHub issue.