Main Function

vistaView()

Creates and initializes a lightbox instance. This function is the primary entry point that instantiates the VistaView class.

function vistaView(params: VistaParams): VistaInterface | null;

Parameters:

• params: VistaParams - Configuration object

Returns: VistaInterface or null if no valid elements are found or input is invalid

Example:

import { vistaView } from 'vistaview';
import 'vistaview/style.css';

const gallery = vistaView({
  elements: '#gallery > a',
  maxZoomLevel: 3,
  preloads: 2,
});

Note

The vistaView() function (lowercase ‘v’) is the factory function, while VistaView (capital ‘V’) is the underlying class. For most use cases, use the vistaView() function. Direct access to the VistaView class is useful for TypeScript type imports and advanced extensions.

Configuration: See Types for:

• VistaParams - Main configuration interface
• VistaOpt - All configuration options
• VistaImgConfig - Image configuration object

Instance Methods

The vistaView() function returns a VistaInterface object with the following methods:

open(index?)

Opens the lightbox at the specified index (0-based).

open(index?: number): void;

Parameters:

• index (optional): Image index to open at (default: 0)

Example:

const gallery = vistaView({ elements: '#gallery > a' });

gallery.open(); // Open at first image
gallery.open(0); // Open at first image
gallery.open(2); // Open at third image

close()

Closes the lightbox.

close(): Promise<void>;

Returns: Promise that resolves when close animation completes

Example:

await gallery.close();
console.log('Gallery closed');

view(index)

Navigates to a specific image while the lightbox is open.

view(index: number): void;

Parameters:

• index (required): Image index to navigate to (0-based)

Example:

gallery.view(2); // Go to third image

next()

Navigates to the next image. Wraps to first image when at the end.

next(): void;

Example:

gallery.next();

prev()

Navigates to the previous image. Wraps to last image when at the beginning.

prev(): void;

Example:

gallery.prev();

reset()

Recalculates elements and re-attaches event listeners. Useful after DOM changes.

reset(): void;

Example:

// After adding new images to the DOM
document.querySelector('#gallery')!.innerHTML += `
  <a href="/images/new-photo.jpg">
    <img src="/thumbnails/new-photo.jpg" alt="New Photo" />
  </a>
`;

// Refresh the gallery
gallery.reset();

zoomIn()

Zooms in on the current image.

zoomIn(): void;

Example:

gallery.zoomIn();

zoomOut()

Zooms out on the current image.

zoomOut(): void;

Example:

gallery.zoomOut();

getCurrentIndex()

Returns the current image index (0-based).

getCurrentIndex(): number;

Returns: Current image index

Example:

const currentIndex = gallery.getCurrentIndex();
console.log(`Viewing image ${currentIndex + 1}`);

destroy()

Destroys the lightbox instance and removes all event listeners.

destroy(): void;

Example:

gallery.destroy();

Related

• Event Callbacks
• Lifecycle Functions
• Complete Configuration Guide