A simple image gallery overlay which should work an any blog without needing to change anything else.
The overlay is fullscreen and shows one image at a time. The controlls are:
- Button at the top and bottom to quit, or press
Escape
orq
- Button on the left side
Arrow left
ora
to go to the previous image - Button on the right side
Arrow right
ord
to go to the next image
It also is assumed, that the img_filter
, which can be set at the top of the JavaScript finds all <img>
tags which should be included.
Additionally, each <img>
tag should be contained in a single container. Because this copies the content of the parent to work properly with images that have a <source>
tag.
A typical image I want to include looks something like this in HTML:
<picture class="picture-wrapper">
<source srcset="/images/image_500x0_resize_q90_box.jpg 500w, /images/image_800x0_resize_q90_box.jpg 800w" type="image/jpeg">
<source srcset="/images/image_500x0_resize_q90_h2_box.webp 500w, /images/image_800x0_resize_q90_h2_box.webp 800w" type="image/webp">
<img loading="lazy" src="/images/image_1500x0_resize_q90_box.jpg" class="figure-img img-fluid gallery-img-fluid" alt="alt" width="1500" height="1125">
</picture>
And I also have this css:
.gallery-img-fluid {
object-fit: contain;
width: 100%;
height: 100%;
}
I wrote this for Hugo with hugo-responsive-images. This module is automatically installed as a sub-module.
You must initialize your project for hugo modules using the command
hugo mod init github.com/user/project
Then add this module to your projects configuration
# config.yaml
module:
imports:
- path: github.com/future-wd/temp-image-gallery
Then you need to install the module with
hugo mod get
- The latest GoLang (minimum 1.16). See https://golang.org/dl/.
- The lates git for downloading the module. See https://git-scm.com/downloads/.
- Install the latest hugo (at least 0.101.0)
- You hugo project must be initialized for hugo modules e.g.
hugo mod init github.com/username/project
in the root of your project. - Update your modules with
hugo mod get -u
// SCSS import
@import "/simple-image-gallery/styles/main.scss";
// JS import
import 'simple-image-gallery/js/index.js';