Picture 360

Description

The component is used to display a 360° view of a product, using an array of images.

Props

Images parameters

The component need informations in order to initialize. Here is the summary of these paramters :

| Params | Example | Description | | ---------------- | ------------------------------------------ | ------------------------------------------- | | images | [ { id, name, url } , ... ] | Array of images | | dimensions | ["1000x1000", "550x550"] | Array of image size, for <picture> tag | | medias (todo) | ["min-width: 800px", "max-width: 800px"] | Array of media queries, for <picture> tag | | classes (todo) | ["source-large", "source-medium"] | Array of CSS classes, for <picture> tag |

For the following init code samples, we'll assume that images, classes, medias and dimensions are already declared.

Other parameters

The component allow other kind of configuration, if you want to change the default behaviour :

| Params | Example | Description | | ---------- | ------- | ----------------------------------------------------------------------------------------------------------------- | | interval | 50 | Interval between each product image change, when holding a next/prev button, doing a full rotation, or scrolling) | | index | 0 | First image index to display in the set of PixL's images |

Exposed methods

When using

| Method | Example call | Description | | -------- | -------------------- | ------------------------------------------- | | next | component.next() | Display the next image (with auto loop) | | prev | component.prev() | Display the previous image (with auto loop) | | rotate | component.rotate() | Do a 360° rotation of the product |

Usage

Default initialisation

(mandatory parameters for the usage)

const viewer = new Picture360({
  target: document.querySelector('#viewer-360'),
  props: { images, classes, medias, dimensions },
});

Custom behaviour

const viewer = new Picture360({
  target: document.querySelector('#viewer-360'),
  props: {
    images,
    classes,
    medias,
    dimensions,
    interval: 100, // 'slow down' the image change speed [default: 50]
    index: images.length / 2, // go to the 'middle' of the image set [default: 0]
  },
});

Component interactions

You can also interact with the component fromthe "outside".

E.g. if you want to control the component from the outside, using your own buttons.

// Select your custom interaction elements
const myButtonNext = document.querySelector('.my-button-next');
const myButtonPrevious = document.querySelector('.my-button-previous');
const myButtonRotation = document.querySelector('.my-button-rotate');

// Init your Picture360 component
const viewer = new Picture360(/* ... */);

// Bind your elements to component actions
myButtonNext.addEventListener('click', viewer.next);
myButtonPrev.addEventListener('click', viewer.prev);
myButtonRotation.addEventListener('click', () => {
  /* ... */
  viewer.rotate();
});

i18n and translations

todo.

Analytics, event fired to the outside

todo.