By rssfeeds-admin 
Insert a single script tag into your HTML document, and the library automatically binds to your image containers.
Features:
- Single-file distribution at ~7.7 KB.
- The CSS is Base64-encoded and injected at runtime.
- Fullscreen overlay with keyboard navigation.
- Swipe gesture support for touchscreen devices.
- Autoplay mode.
- A download button in the toolbar lets users save the currently displayed image.
- High-resolution loading from a
large/subfolder.
How To Use It:
1. Place the script in the <head> tag with the defer attribute, or just before the closing </body> tag:
<!– Option A: deferred in <head> for optimal loading –>
<script defer src=”path/to/k7.min.js”></script>
<!– Option B: before closing </body> –>
<script src=”path/to/k7.min.js”></script>
2. Wrap your images in a container with the class images. K7 scopes its click listener to that container. Any <img> element inside it joins the gallery.
<div class=”images”>
<img src=”portfolio/shot01.webp” loading=”lazy” alt=”Product on white background”>
<img src=”portfolio/shot02.webp” loading=”lazy” alt=”Lifestyle context shot”>
<img src=”portfolio/shot03.webp” loading=”lazy” alt=”Close-up detail view”>
</div>
3. K7 expects a large/ subfolder relative to each image’s path. When a user opens an image, the script rewrites the path from portfolio/shot01.webp to portfolio/large/shot01.jpg, using .jpg as the default high-res extension. Place your full-size files in that subfolder with matching filenames. To keep a non-.jpg extension for the high-res version, add data-ext to the thumbnail element:
The thumbnail and high-res filenames must match. Only the folder path and extension change. If
data-extis absent, K7 uses.jpgregardless of the thumbnail’s own extension.
<img
src=”portfolio/shot01.webp”
loading=”lazy”
alt=”Product detail”
data-ext=”webp”
>
4. Style the lightbox gallery with CSS Custom Properties:
:root {
--color1: #1a1a2e; /* background color shown while an image loads */
--color2: #16213e; /* main overlay background color */
}Alternatives:
- GLightbox: A full-featured lightbox that handles videos, iframes, and remote content alongside images.
- PhotoSwipe: A gallery with zoom gestures, a history API, and a custom UI layer.
FAQs:
Q: My images open in the lightbox but show a broken image icon. What’s wrong?
A: K7 looks for a large/ subfolder relative to each thumbnail path. If your thumbnail sits at photos/shot01.jpg, K7 tries to load photos/large/shot01.jpg. Create that folder and place your full-size files there with matching filenames. If you only have one image size, copy the originals into large/ with the same names.
Q: The gallery picks up images I don’t want in the lightbox. How do I exclude them?
A: K7 selects all <img> elements inside .images containers. Move any images you want excluded outside every .images wrapper. If no .images container exists anywhere on the page, K7 falls back to document.body and captures all images. Add class="images" to only the containers you want to activate and K7 will scope itself to those groups.
Q: Can I use .png or .avif for the high-resolution files?
A: Yes. Add data-ext="png" or data-ext="avif" to the thumbnail <img> tag. K7 reads that attribute and uses it when building the large/ path. The thumbnail itself can stay in any format.
Q: How do I change the autoplay interval?
A: The delay is hardcoded at 1,330 ms in the source. To change it, edit the unminified source file, update the numeric value, and rebuild with your preferred minifier.
The post Lightweight Vanilla JS Gallery Lightbox – K7 appeared first on CSS Script.
Discover more from RSS Feeds Cloud
Subscribe to get the latest posts sent to your email.