Component for image attached to thumbnail carousel (amp-image-picker-carousel) #4500

Open
rudygalfi opened this Issue Aug 12, 2016 · 0 comments

Projects

Tasks in amp-commerce-gallery

In Progress in Ecommerce content features

1 participant

@rudygalfi
Contributor

You see this pattern all over the web, particularly on e-commerce sites:

screen shot 2016-08-12 at 11 29 33 am

This requests adding such a component to AMP. At a high-level, it can be composed by taking amp-img and amp-carousel and combining them in a way to pass messages between them. In lieu of creating such an inter-component message passing protocol, we need to create a new component.

This needs a fuller design, but in the interest of capturing some basic behaviors, here's a list of initially brainstormed features:

  • Display relatively larger primary amp-img
  • Ability to display amp-carousel filled with thumbnails (amp-img) near primary amp-img
  • Selecting a thumbnail in the carousel updates the primary amp-img
  • The primary amp-img is swipeable (but in slides format only not continuously scrollable)
  • There is a thumbnail indicator. Updates to the primary image (either thumbnail selection or swipe of primary) causes thumbnail indicator to update. The indicator can be styled (define border). When the indicator needs to update to a thumbnail that's not fully visible, the thumbnail carousel auto-scrolls.
  • The thumbnails that are not selected have an "anti-indicator" that can be styled (e.g. add opacity).
  • The thumbnail strip can be positioned either above or below the primary. Below is the default.

Notes: Consider making the component more generic by not restricting to amp-img, as described above. The primary object could be anything, provided the space is declared in advance. The thumbnails should still likely be images, but could be anything that would also fit into a pre-declared and contained space.

cc @ericlindley-g

@rudygalfi rudygalfi added this to the Backlog milestone Aug 12, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment