Custom content

The viewer can show any DOM elements. This can be used to show non-cylindo hosted content. You can easily apply your own custom styles to the content you include, ensuring it aligns with your brand and design preferences.

Result

Loading...

Live Editor

<cylindo-viewer
  customer-id="5098"
  code="ARMCHAIR-PDP"
  controls="nav fullscreen"
>
  <cylindo-custom-content slot="Picture(01)">
    <img
      src="https://picsum.photos/id/37/1600/1200.webp"
      style={{
        position: "absolute",
        top: "50%",
        left: "50%",
        transform: "translate(-50%, -50%)",
      }}
    />
  </cylindo-custom-content>
  <cylindo-custom-content
    slot="DOM"
    style={{
      display: "block",
      padding: 16,
    }}
  >
    Show any DOM elements. Navigate forward to see some examples:
    <ul>
      <li>HTML content (Looking at now)</li>
      <li>External images</li>
      <li>Videos</li>
    </ul>
  </cylindo-custom-content>
  <cylindo-custom-content slot="Picture(02)">
    <img src="https://picsum.photos/id/38/1600/1200.webp" />
  </cylindo-custom-content>
  <cylindo-360 />
  <cylindo-custom-content slot="Video">
    <iframe
      src="https://www.youtube-nocookie.com/embed/wnhvanMdx4s?controls=0"
      style={{
        width: "100%",
        height: "100%",
      }}
    />
  </cylindo-custom-content>
</cylindo-viewer>

Props

Name	Type	Default	Description
slot	string (required)		The slot to show content
thumbnail-src	string		An optional image that can be used by a thumbnail component
zoom-src	string		An image that can be used by a zoom feature. If passed, the item will be zoomable

tip

Due to the way slots work, you can have multiple elements with the same slot name. They will be listed after each other.

Usage

You can use the <cylindo-custom-content> element to show non-cylindo hosted content after cylindo curated content. This can be used to show HTML content, external images, videos, etc.

Result

Loading...

Live Editor

<cylindo-viewer
  customer-id="5098"
  code="CONFIGURABLE-SECTIONAL-PDP"
  remote-config="k2hctc08"
>
  <cylindo-thumbnail-bar></cylindo-thumbnail-bar>
  <img
    slot="placeholder"
    src="https://content.cylindo.com/api/v2/5098/products/CONFIGURABLE-SECTIONAL-PDP/default/k2hctc08/placeholder.webp"
  />
  <cylindo-custom-content
    slot="Picture(01)"
    thumbnail-src="https://picsum.photos/id/59/128.webp"
  >
    <img src="https://picsum.photos/id/59/1600/1200.webp" />
  </cylindo-custom-content>
  <cylindo-custom-content
    slot="Picture(02)"
    thumbnail-src="https://picsum.photos/id/51/128.webp"
  >
    <img src="https://picsum.photos/id/51/1600/1200.webp" />
  </cylindo-custom-content>
</cylindo-viewer>

Zoom

In order to have zoom with the cylindo-custom-content element, pass a URL to the zoom-src attribute.

Although you can pass the same URL to the zoom-src, we do not recommend it as the results quality will be poor . Pass a higher resolution image, instead, for the best results, as shown in the example below, where we pass a higher resolution image to the zoom-src attribute.

We also recommend passing images that have the same aspect ratio as the viewer.

Result

Loading...

Live Editor

<cylindo-viewer
  customer-id="5098"
  code="ARMCHAIR-PDP"
  controls="fullscreen zoom nav"
>
  <cylindo-custom-content
    slot="Picture(01)"
    zoom-src="https://picsum.photos/id/434/4800/3600.webp"
  >
    <img
      src="https://picsum.photos/id/434/1200/900.webp"
      style={{
        width: "100%",
        height: "100%",
        objectFit: "contain",
      }}
    />
  </cylindo-custom-content>
  <cylindo-custom-content
    slot="Picture(02)"
    zoom-src="https://picsum.photos/id/557/5000/2500.webp"
  >
    <img
      src="https://picsum.photos/id/557/1200/600.webp"
      style={{
        width: "100%",
        height: "100%",
        objectFit: "contain",
      }}
    />
  </cylindo-custom-content>
  <cylindo-custom-content
    slot="Picture(03)"
    zoom-src="https://picsum.photos/id/506/2500/5000.webp"
  >
    <img
      src="https://picsum.photos/id/506/600/1200.webp"
      style={{
        width: "100%",
        height: "100%",
        objectFit: "contain",
      }}
    />
  </cylindo-custom-content>
</cylindo-viewer>

tip

The zoom only works with images. The src of the first image tag inside the cylindo-custom-content element will be used as an initial image while awaiting the higher-resolution one.