Socket
Socket
Sign inDemoInstall

@komposit/picture360

Package Overview
Dependencies
0
Maintainers
2
Versions
13
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@komposit/picture360

Komposit Picture 360 component


Version published
Maintainers
2
Created

Readme

Source

Picture 360

npm

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 :

ParamsExampleDescription
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 :

ParamsExampleDescription
interval50Interval between each product image change, when holding a next/prev button, doing a full rotation, or scrolling)
index0First image index to display in the set of PixL's images

Exposed methods

When using

MethodExample callDescription
nextcomponent.next()Display the next image (with auto loop)
prevcomponent.prev()Display the previous image (with auto loop)
rotatecomponent.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.

FAQs

Package last updated on 08 Mar 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc