Spinner

Web component (recommended)

This JavaScript web component is the recommended way to implement the Spinner on your website.

1. Include the following script-tag in your HTML, preferably at the end of the body:

   <script
     type="module"
     src="https://spinner.photo-motion.com/lib/photo-motion-spinner.js"
   ></script>

2. Add the following HTML where you want the spinner to appear:

   <photo-motion-spinner article-hash="9541cfc3-92f6-4f1f-aef4-ab74f45b4651"
   ></photo-motion-spinner>

Options

Attribute	Description	Options
article-hash	Hash of the vehicle you wish to display. See Spinner
buttons-placement	Position of the buttons	top bottom
viewer-mode	Orientation of spinner	landscape portrait
can-scroll	Activate the ability to zoom in and out via the mouse-wheel	true false
can-fullscreen	Activate the ability to go fullscreen	true false
clean-ui	Hide all UI-elements	true false

Hide buttons

The following attributes can be used to hide individual buttons on the spinner. By default all available features/buttons are visible. To hide all UI-elements, use the clean-ui-attribute instead.

hide-zoom hide-interior hide-gallery hide-doors hide-lightshide-showcase hide-hotspots

Iframe

<iframe
  src="https://spinner.photo-motion.com/1e9e04a5-01c7-455f-9faf-f309134fed4e"
  width="600"
  allowfullscreen="true"
  style="aspect-ratio: 3/2"
></iframe>

Dimensions

The width and height of the iframe can be controlled through its width and height properties, or by using CSS.

It is recommended to always use a 3 x 2-ratio for width x height.

iOS devices

On iOS-devices (e.g. iPhones and iPads) it is not possible to display an iframe fullscreen. On these devices the full screen option is hidden.