@komposit/picture360 NPM

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();
});