npm package: @komposit/picture360
Description: Komposit Picture 360 component
Latest version: 1.2.1
Deprecated: Package no longer supported.

# Picture 360

[![npm](https://img.shields.io/npm/v/@komposit/picture360)](https://www.npmjs.com/package/@komposit/picture360)

## 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)

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

### Custom behaviour

```javascript
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.

```javascript
// 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.