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
<cylindo-viewer customer-id="5098" code="ARMCHAIR-PDP">
  <cylindo-studio code="RS-BARILA-A" customer-id="5098"></cylindo-studio>
  <cylindo-360-frame frame="10"></cylindo-360-frame>
  <cylindo-360 frame="3"></cylindo-360>
  <cylindo-model></cylindo-model>
  <cylindo-dimension-shot
    dimension-code="UXPP"
    unit="Cm"
  ></cylindo-dimension-shot>
  <cylindo-thumbnail-bar></cylindo-thumbnail-bar>
</cylindo-viewer>

The thumbnail bar will be replaced by indicators if indicators is passed to the controls attribute of the viewer on Gallery mode.

caution

indicators is passed by default to the controls attribute. Read more about the controls attribute here. If you want the thumbnail bar to show when on presentation="gallery" mode, change the controls value.

Result
Loading...
Live Editor
<cylindo-viewer customer-id="5098" code="KINGBED PDP" presentation="gallery">
  <cylindo-studio code="RS-ELMO DOUBLE" customer-id="5098"></cylindo-studio>
  <cylindo-360-frame frame="10"></cylindo-360-frame>
  <cylindo-360-frame frame="16"></cylindo-360-frame>
  <cylindo-360-frame frame="22"></cylindo-360-frame>
  <cylindo-thumbnail-bar></cylindo-thumbnail-bar>
</cylindo-viewer>

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
<div className="styled-thumbnail">
  {/* For the purpose of the example, we are scoping the styles in the div element. */}
  <style>
    {`
      .styled-thumbnail {
        --icon-color: SteelBlue;
        --chevron-color: SteelBlue;
        --item-gap: 1rem;
      }
      .styled-thumbnail ::part(item) {
        cursor: crosshair;
      }
    
    `}
  </style>
  <cylindo-viewer customer-id="5098" code="ARMCHAIR-PDP">
    <cylindo-studio code="RS-BARILA-A" customer-id="5098" />
    <cylindo-360-frame frame="10" />
    <cylindo-360 frame="3" />
    <cylindo-model />
    <cylindo-thumbnail-bar />
  </cylindo-viewer>
</div>
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
<div>
  <cylindo-thumbnail-bar for="1234" style={{ display: "block", marginBottom: "100px" }}/>
  <cylindo-viewer
    id="1234"
    customer-id="5098"
    code="ARMCHAIR-PDP"
  >
    <cylindo-studio code="RS-BARILA-A" customer-id="5098" />
    <cylindo-360-frame frame="10" />
    <cylindo-360 frame="3" />
    <cylindo-model />
    <cylindo-dimension-shot dimension-code="UXPP" unit="Cm" />
  </cylindo-viewer>
</div>
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.