Custom Image Extensions and Other Configuration

To override the default extension, add a data-ext attribute to the <img> tag—e.g., <img src="photos/photo16.webp" loading="lazy" alt="photo16" data-ext="webp">. This replaces the default .jpg extension with .webp for higher resolution loading. If the data-ext attribute is set, it will override the default extension. If not, the extensions should match (e.g., .jpg remains .jpg). The dataset extension (index.dataset.ext ||) can be removed if unnecessary, as a micro-optimization. It does not need to be applied to .svg files.

Configurations starts [// user config].

This image gallery should ideally maintain image proportions, but it can be adjusted differently by setting, for example: #k7 img { width: 100%; height: 100%; }. Background colors can be modified by adding, for instance: :root{ --color1: #ee7; --color2: #777; }

Compiled with Google Closure: google-closure-compiler -O ADVANCED k7.js --js_output_file k7.min.js

About

This image gallery features a full-window mode and automatically hides buttons when the cursor moves out of the window. It includes a transparent, clickable background that disappears when clicked. The gallery supports autoplay and includes a download button for images, but these can be hidden if not needed. Built with vanilla JavaScript, it is lightweight, with a total size of approximately 7.7KB. This gallery is not AI-generated it has been tested for years and improved over the past few years. I'm sorry for the font which I created for the fun project: https://kostassliazas.github.io/project-k/