Spinner

Web component

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 spinner-hash="1e9e04a5-01c7-455f-9faf-f309134fed4e"
   ></photo-motion-spinner>

Options

Attribute	Description	Options
spinner-hash	Hash of the spinner you wish to display. See Spinner
spinner-data	JSON string of spinner configuration data
spinner-url	URL path to a spinner JSON file
article-hash	Deprecated. Use spinner-hash instead. Still works.
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

Hide buttons and UI

The following attributes can be used to hide individual buttons on the spinner. By default, all available features/buttons are visible.

For example, the following code will hide the zoom and interior buttons:

<photo-motion-spinner
  spinner-hash="spinner-hash-uuid"
  hide-zoom
  hide-interior
/>

Attribute	Description
clean-ui	Hide all UI-elements
hide-zoom	Hide the zoom button
hide-interior	Hide the interior button
hide-gallery	Hide the gallery button
hide-doors	Hide the doors button
hide-lights	Hide the lights button
hide-showcase	Hide the showcase button
hide-hotspots	Hide the hotspots button

Iframe

Deprecated and will be removed in the future.

The iframe implementation is deprecated. Please use the Web component instead for better performance and features.

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