Skip to main content

Thumbnail Bar

The thumbnail bar is a web-component enabling the user to choose between the <cylindo-viewer> items. It either needs to be passed as a child element of the <cylindo-viewer>, or have its for attribute pointing to it.

Installation

You can register the <cylindo-thumbnail-bar> on your page by adding the following script tag to your <head> alongside the script of the <cylindo-viewer>.

<script
type="module"
src="https://viewer-cdn.cylindo.com/v1/bar.mjs"
async
></script>

Usage

The thumbnail bar can be called as an HTML or JSX element and is framework agnostic.
The cylindo-360 item and the cylindo-model will be shown as icon buttons, respectively. The thumbnail bar will also be displayed in full screen mode.

Result
Loading...
Live Editor

The thumbnail bar will be replaced by the indicators, if the indicators are passed to the controls attribute of the viewer while the presentation="gallery".

caution

By default the indicators are passed to the controls attribute. Read more about the controls attribute here. If you want the thumbnail bar to show when the presentation="gallery", change the controls default.

Result
Loading...
Live Editor

Styling

You can style the thumbnail bar in different manners, either through the CSS pseudo-element ::part or through the CSS variables.
Read more about it here.

You can play around with the styles in the live example below.

Result
Loading...
Live Editor
tip

The styles do not have to be scoped to your component. You can use the CSS variables and ::part CSS pseudo-element in a global CSS file. For instance, the CSS variables could be in the :root pseudo-class of your document. In turn, they would be applied it to all your <cylindo-thumbnail-bar> elements.

Detached usage

The thumbnail bar can be detached from the viewer. This can be useful in a number of situations:

  • If you want to position the thumbnail-bar elsewhere: On top of the viewer, in an overlay...
  • If you want to size the viewer without having to include the vertical space dedicated to the thumbnail-bar
  • If you want to have multiple thumbnail-bars or indicators

To detach the thumbnail-bar, you need to set its for attribute to an id pointing to a valid cylindo-viewer element.

Result
Loading...
Live Editor
caution

Since the thumbnail-bar is not part of the viewer anymore, it will not be included in fullscreen mode. You can re-add it manually by following this example.