Image gallery JavaScript (vanilla)

  • image gallery1
  • image gallery2
  • image gallery3
  • image gallery4
  • image gallery6
  • image gallery7
  • image gallery5

How to include

Download JavaScript file (main.js ~10 KiB) and suggest a suitable file name

Copy/Paste ctrl+a/ctrl+c/ctrl+v to head or before closing body tag

<script defer src ="js/main.js"></script>

COMPILED DEFAULTS

export const defaults = { delaySeconds: 1033, folder: 'l/', imageContainer: 'images', showButtons: 1, showButtonsOnPlay: 1, extension: ''};

FIRST IMAGE IS NOT INCLUDED for testing purposes

Tools used for Image Gallery

https://css.github.io/csso/csso.html

https://base64.guru/converter/encode/css

https://kate-editor.org/

images and vectors for demo, internet, electricity, free and paid educational materials, old computer

  • imageContainer: image gallery - selects all images with given classes. if not set, it selects all images by default.
  • showButtons: show bottom buttons - controls the visibility of bottom buttons (e.g., autoplay and download).
  • folder: folder location for higher resolution images or image prefix - specifies the location for higher resolution images or sets an image prefix.
  • delaySeconds: autoplay delay - sets the duration for displaying each image in autoplay mode.
  • showButtonsOnplay: show buttons during autoplay - determines whether to display buttons during autoplay.
  • extension: extension for higher resolution images - specifies the file extension for higher resolution images.