index.d.ts

interface options {
  /** The data source for the displayed items. See [Item Properties](https://github.com/henrygd/bigger-picture#item-properties) for details.
   * 
   * If using NodeList or Node, the information is passed via data attributes. If using Array, the information is passed via object. */
  items: HTMLElement|HTMLCollection|NodeList|item[];
  /** If the specified node matches a node in `items` (or matches the `element` value on an item if using an array), the gallery will start at that position.
  * 
  * For example, you could use this inside a click handler by passing `event.target`. (See [codesandbox demo](https://codesandbox.io/s/bigger-picture-basic-gallery-o4kb82) for example.) */
  el?: HTMLElement|EventTarget;
  /** Start position of gallery (zero-indexed). If using `el` this will be ignored. */
  position?: number;
  /** Controls the size of the displayed item. Use `1` to fill item to screen edges. */
  scale?: number;
  /** Overrides the default intro animation. Currently `fadeup` is the only alternative. */
  intro?: string;
  /** Specifies that the lightbox is inline. Interaction events are modified to avoid hijacking scroll and tab press. */
  inline?: boolean;
  /** Hides the close button and prevents the lightbox from closing unless the [`close`](https://github.com/henrygd/bigger-picture#close) method is called. Recommended to use in combination with an inline gallery. */
  noClose?: boolean;
  /** Return a truthy value to disable pinch zoom. Function is executed at the time of the pinch. Supplies `container` - the gallery's wrapper element.
   * 
   * ```js
   * bp.open({
   *    noPinch: (container) => container.clientWidth < 800,
   * })
   * ```
  */
  noPinch?: () => any;
  /** Specify wrapper element to trap focus within on tab press. Useful when mounting a gallery inside a custom layout. */
  focusWrap?: HTMLElement|EventTarget;
  /** Restricts an image's maximum zoom level to `maxZoom` times the starting size, even if the item's `width` / `height` is larger. For example, a `maxZoom` of 2 on an image that is 800px wide when zoomed out would limit the image to a maximum zoom of 1600px width. */
  maxZoom?: number;
  /** Executes just before intro animation. Supplies `container` - the gallery's wrapper element, and `activeItem` - an object containing the currently displayed item's data. */
  onOpen?: (container: HTMLElement, activeItem: item) => void;
  /** Executes just after the active item is updated. Supplies `container` and `activeItem`. */
  onUpdate?: (container?: HTMLElement, activeItem?: item) => void;
  /** Executes just before outro animation. Supplies `container` and `activeItem`. */
  onClose?: (container?: HTMLElement, activeItem?: item) => void;
  /** Executes just after the lightbox has been closed and removed from the page. */
  onClosed?: () => void;
  /** Executes when the dimensions of the gallery (not the window) are changed. Supplies `container` and `activeItem`. */
  onResize?: (container?: HTMLElement, activeItem?: item) => void;
  /** Executes when an image is clicked. Return a truthy value to prevent zooming. Supplies `container` and `activeItem`. */
  onImageClick?: (container?: HTMLElement, activeItem?: item) => any;
  /** Executes when an error is thrown when loading an item (image, audio, video or iframe). */
  onError?: (container?: HTMLElement, activeItem?: item, error?: Error) => void;
}

interface item {
  [key: string]: any;
  /** Largest possible width of media item in pixels. Not required for HTML, which can be sized via CSS. */
  width?: string|number;
  /** Largest possible height of media item in pixels. Not required for HTML, which can be sized via CSS. */
  height?: string|number;
  /** URL or path to image used for thumbnail displayed before media loads. */
  thumb?: string;
  /** URL or path to full image. Can be a `srcset` value.
   * 
   * When using `srcset`, the `sizes` value will update automatically when an image is zoomed. You may override this behavior by setting the [`sizes`](https://github.com/henrygd/bigger-picture#sizes) value. */
  img?: string;
  /** For native video and audio, an array of objects specifying [`src`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-src) (required) and [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-type) (optional). A string may be used if it is JSON parsable. Each object will create a `source` element, and all key / value pairs in the object will be added as attributes. */
  sources?: object[]|string;
  /** HTML that will be rendered in the container. When using HTML, please control dimensions with CSS. No need to pass `width` or `height`.
   * 
   * For advanced use, you can pass an empty string, then mount a component using the [`onOpen`](https://github.com/henrygd/bigger-picture#onopen) method:
   * 
   * ```js
   * // mounting svelte component (firewatch example from demo site)
   * onOpen(container) {
   *    new Firewatch({
   *      target: container.querySelector('.bp-html'),
   *    })
   * },
  ``` */
  html?: string;
  /** Image alternative text */
  alt?: string;
  /** Title attribute for iframes */
  title?: string;
  /** Text to be displayed using built in caption. You may pass html tags and styles can be overriden via CSS. */
  caption?: string;
  /** Sets the sizes attribute if you're using `srcset`. */
  sizes?: string;
  /** Restricts an image's maximum zoom level to `maxZoom` times the starting size, even if the item's `width` / `height` is larger. For example, a `maxZoom` of 2 on an image that is 800px wide when zoomed out would limit the image to a maximum zoom of 1600px width.
   * 
   * If `maxZoom` is set on an individual item it will override the value set in options. Attribute name is `data-max-zoom`. */
  maxZoom?: number;
  /** Array of text track data to use with videos. String option is just a stringified array. See the [MDN page on track elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track) for more information. */
  tracks?: string|object[];
  /** To control the default open / close animation, add a property `element` to each item that contains a node on the page. The active item's `element` will be where the animation opens from / closes to. If you're not using the default scale animation, this is not needed. */
  element?: HTMLElement|EventTarget;
}

export interface BiggerPictureInstance {
  /** Opens the instance. */
  open: (options: options) => void;
  /** Closes the lightbox. */
  close: () => void;
  /** Changes to next item in gallery. */
  next: () => void;
  /** Changes to previous item in gallery. */
  prev: () => void;
  /** Changes to `position` item in gallery (zero-indexed). */
  setPosition: (options: {position: number}) => void;
}

interface initObject {
  /** Specifies parent element inside which the gallery will be mounted */
  target: HTMLElement;
}

/** Initializes BiggerPicture instance */
declare function BiggerPicture(options: initObject) : BiggerPictureInstance

export default BiggerPicture