Fibbl Live Image

An element to display a product image that can be animated (switched to a video) on hover or on swipe. This element is supposed to be rendered on top of an existing image, however, it can be used as a standalone component as well - it's up to you. For this reason, the element doesn't have the "absolute" position by default.

Below you can see 2 live demos - in the first, the component is used as such, in the second, the component is rendered on top of an existing image (pay attention to the CSS code). In a real use case, it's good to have an existing image below the live image - if for some reason the Fibbl model is unavailable the Live image component will just remove itself, so the original image will be visible.

What's more, you have wrap the component with the "a" tag in order to handle the click (alternatively, you can add a click event listener to the component).

Code example

<script src="https://cdn.fibbl.com/fibbl.js" type="module"></script>
<fibbl-live-image
    style="height: 300px; width: 300px;"
    data-product-id="@demo-shoe"
></fibbl-live-image>

Custom attributes

• data-product-id - a unique id of product in Fibbl's databases.

Standalone component

See the Pen Untitled by Fibbl (@Fibbl) on CodePen.

Live image on top of default image

See the Pen Fibbl Live Image on existing image by Fibbl (@Fibbl) on CodePen.