VistaImage Class

The VistaImage class extends VistaBox and implements image-specific functionality including responsive images, hi-res loading, and zoom/pan controls.

Overview

VistaImage is the default content type used by VistaView for displaying images. It automatically handles:

Progressive image loading with thumbnails
Responsive images with srcset support
Zoom and pan interactions
Hi-resolution image transitions

Usage

Typically, you don’t instantiate VistaImage directly - VistaView creates instances automatically. However, you can reference it when creating custom extensions.

import { VistaImage } from 'vistaview';

// Used internally by VistaView
const image = new VistaImage(params);

Public Properties

Inherits all properties from VistaBox:

element - HTMLImageElement containing the image
state - Current dimensions and transformations
pos - Position relative to current image
index - Gallery index
config - Image configuration
origin - Origin element information
isReady - Whether image has loaded
thumb - Thumbnail element

Public Methods

constructor()

constructor(par: VistaImageParams)

Creates a new VistaImage instance with automatic image loading.

Inherited Methods

All public methods from VistaBox are available:

init() - Initialize the image
setSizes() - Calculate dimensions
prepareClose() - Prepare for closing
cancelPendingLoad() - Cancel loading
destroy() - Clean up resources
cloneStyleFrom() - Copy style from another instance
toObject() - Serialize current state
setInitialCenter() - Set zoom center point

VistaBox - Base class
VistaView - Main controller
Extensions - Creating custom content types

GitHub • npm • llms.txt • Context7