A minimalist, dynamic, responsive, touch-enabled photo gallery built using pure JavaScript and CSS grid layout.
Tap the thumbnail to display the image in a fullscreen view where the mobile users can navigate between all images with touch swipe events.
1. Create a template for the photo gallery.
<template>
<li>
<img alt="" loading="lazy">
</li>
</template>
2. Place your images in the images
folder and override the image names in the images.js
as follows:
export default [
"1.jpg",
"2.jpg",
"3.jpg",
"4.jpg",
"5.jpg"
];
3. Import the app.js
as a module in the document.
<script src="app.js" type="module"></script>
4. The necessary CSS styles for the photo gallery.
html, body {
height: 100%;
}
body, ul {
margin: 0;
}
ul {
display: grid;
height: 100%;
overflow: auto;
list-style: none;
will-change: opacity;
}
ul img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
#thumbnails {
--columns: 7;
--gutter: 20px;
--size: calc((100vw - (var(--columns) + 1) * var(--gutter)) / var(--columns));
grid: auto-flow var(--size) / repeat(var(--columns), 1fr);
gap: var(--gutter);
padding: var(--gutter);
box-sizing: border-box;
}
@media (max-width: 450px) {
#thumbnails {
--columns: 3;
--gutter: 15px;
}
}
#scroller {
grid: 100% / auto-flow 100%;
scroll-snap-type: x mandatory;
padding: 0;
}
#scroller li {
scroll-snap-align: center;
scroll-snap-stop: always;
}
.hidden {
visibility: hidden;
}
Author: bendc
Demo: https://cldup.com/CjFmTyRE4D.html
Source Code: https://github.com/bendc/gallery
#javascript