# ImageView Class

# Overview

ImageView class integrated with the Controller class instances and provides 2D product rendering.

# Creating Image Views

<div class="product__image">
</div>

In order to create an image view, the host site must first obtain an instance of a Controller class, as describe above. The host site also needs to define a placement for the future image view, typically an empty DIV element that is sized appropriately to house the product rendering.

const image = new window.DriveCustomizer.ImageView(controller, {
    container: document.querySelector('.product__image'),
});

Once the prerequisites are complete, create an instance of the image view as in the example.

# ImageView Events

# imagesLoading

Notifies the host of the image view whether product images are being loaded. This allows the host to display the appropriate loading animation.

state The state parameter may be one of:
- loading Indicates that images are currently being loaded.
- done Loading is complete and a new product image has been rendered.

# ImageView Methods

# resize

Must be called whenever the image view container size is updated.

# destroy

Destroys the image view and releases resources.

# selectViewByCode

Activates a view with the given code.

# selectedView

Returns the currently active view reference.

# selectedFrame

Returns the currently active frame reference.

# updateView

Updates current image to the specified view.

# repaint

Redraws the image view.

← Controller Class