ImageViewer

Singleton image viewer with previous and next navigation over a group of images, keyboard support and a default title for unnamed ones

Live preview

Open in new tab ↗
  • singleton
  • place the component under <body element

Configuration:

  • container {String} a container for group of images (default: .img-container)
  • selector {String} a image selector, (default: .img-viewer)
  • loading {Boolean} enables loading between slides (default: true)
  • unknown {String} a title for unnamed images (default: Unknown image)

Good to know:

  • image is loaded from the data-src="" or from the src="" attributes
  • names are obtained from the title="" or from the alt="" attributes

More UI components

Browse all 348