Skip to content
VistaView v2

Event Callbacks

Event callbacks allow you to hook into different stages of the lightbox lifecycle.

Event Callback Types

Section titled “Event Callback Types”

onOpen

Section titled “onOpen”

Triggered when the lightbox opens.

onOpen?: (vistaView: VistaView) => void;

Parameters:

  • vistaView: VistaView - The VistaView instance

Example:

vistaView({
  elements: '#gallery > a',
  onOpen: (vistaView) => {
    console.log('Lightbox opened');
    console.log('Total images:', vistaView.state.elmLength);
  },
});

onClose

Section titled “onClose”

Triggered when the lightbox closes.

onClose?: (vistaView: VistaView) => void;

Parameters:

  • vistaView: VistaView - The VistaView instance

Example:

vistaView({
  elements: '#gallery > a',
  onClose: (vistaView) => {
    console.log('Lightbox closed');
    console.log('Last viewed index:', vistaView.state.currentIndex);
  },
});

onImageView

Section titled “onImageView”

Triggered when navigating between images or when opening at a specific image.

onImageView?: (data: VistaData, vistaView: VistaView) => void;

Parameters:

  • data: VistaData - Navigation data with from/to information
  • vistaView: VistaView - The VistaView instance

Example:

vistaView({
  elements: '#gallery > a',
  onImageView: (data, vistaView) => {
    console.log(`Viewing image ${data.index.to! + 1} of ${vistaView.state.elmLength}`);
    if (data.via.next) console.log('→ Next');
    if (data.via.prev) console.log('← Previous');
  },
});

onContentChange

Section titled “onContentChange”

Triggered when content changes (including zoom operations).

onContentChange?: (content: VistaImageClone, vistaView: VistaView) => void;

Parameters:

Example:

vistaView({
  elements: '#gallery > a',
  onContentChange: (content, vistaView) => {
    console.log('Zoom level:', content.state.transform.scale.toFixed(2) + 'x');
  },
});

Event Data Types: See Types for:

Section titled “Related”
GitHub • npm • llms.txt • Context7

© 2026 • MIT License