Lifecycle Functions

Lifecycle functions allow you to override VistaView’s default behavior at key stages.

Lifecycle Function Types: See Types for:

VistaInitFn - Custom initialization function
VistaImageSetupFn - Custom setup function
VistaTransitionFn - Custom transition function
VistaOpenFn - Custom open function
VistaCloseFn - Custom close function

Usage Examples

Custom Initialization

import { vistaView, init } from 'vistaview';

vistaView({
  elements: '#gallery a',
  initFunction: (vistaView) => {
    // Call default initialization
    init(vistaView);

    // Add custom initialization
    console.log('Custom initialization');
    console.log('Total images:', vistaView.state.elmLength);
  },
});

Custom Image Setup

import { vistaView, imageSetup } from 'vistaview';

vistaView({
  elements: '#gallery a',
  imageSetupFunction: (data, vistaView) => {
    // Call default setup
    imageSetup(data, vistaView);

    // Custom setup logic
    console.log('Setting up image:', data.index.to);
  },
});

Custom Transition

import { vistaView, transition } from 'vistaview';

vistaView({
  elements: '#gallery a',
  transitionFunction: (data, abortSignal, vistaView) => {
    // Use default transition
    return transition(data, abortSignal, vistaView);
  },
});

Custom fade transition:

vistaView({
  elements: '#gallery a',
  transitionFunction: (data, abortSignal, vistaView) => {
    const elements = data.htmlElements;

    if (elements.from && elements.to) {
      const fromElms = elements.from;
      const toElms = elements.to;

      // Fade out old images
      fromElms.forEach((elm) => {
        elm.style.transition = 'opacity 300ms ease';
        elm.style.opacity = '0';
      });

      // Fade in new images
      toElms.forEach((elm) => {
        elm.style.opacity = '0';
        elm.style.transition = 'opacity 300ms ease';
        setTimeout(() => (elm.style.opacity = '1'), 50);
      });

      const transitionEnded = new Promise<void>((resolve) => {
        setTimeout(resolve, 350);
      });

      return {
        cleanup: () => {},
        transitionEnded,
      };
    }
  },
});

Custom Close

import { vistaView, close } from 'vistaview';

vistaView({
  elements: '#gallery a',
  closeFunction: (vistaView) => {
    console.log('Custom close logic');

    // Call default close
    close(vistaView);
  },
});

Default Behavior Functions

These functions implement the default behavior and can be imported for use in custom function overrides:

init

Default initialization function.

import { init } from 'vistaview';

vistaView({
  elements: '#gallery a',
  initFunction: (vistaView) => {
    init(vistaView);
    // Add custom logic after default init
  },
});

open

Default open function.

import { open } from 'vistaview';

close

Default close function.

import { close } from 'vistaview';

vistaView({
  elements: '#gallery a',
  closeFunction: (vistaView) => {
    // Custom logic before close
    console.log('Closing lightbox');

    // Call default close
    close(vistaView);
  },
});

transition

Default transition animation function.

import { transition } from 'vistaview';

vistaView({
  elements: '#gallery a',
  transitionFunction: (data, abortSignal, vistaView) => {
    return transition(data, abortSignal, vistaView);
  },
});

imageSetup

Default image setup function.

import { imageSetup } from 'vistaview';

vistaView({
  elements: '#gallery a',
  imageSetupFunction: (data, vistaView) => {
    imageSetup(data, vistaView);
    // Add custom setup logic
  },
});

DefaultOptions

Default configuration options object. See VistaOpt for all configuration options.

import { DefaultOptions } from 'vistaview';

const DefaultOptions: VistaOpt = {
  animationDurationBase: 333,
  maxZoomLevel: 2,
  preloads: 1,
  keyboardListeners: true,
  arrowOnSmallScreens: false,
  rapidLimit: 222,
  controls: {
    topLeft: ['indexDisplay'],
    topRight: ['zoomIn', 'zoomOut', 'close'],
    bottomLeft: ['description'],
  },
};

GitHub • npm • llms.txt • Context7