Minimalist Touch-friendly Gallery In JavaScript

Preview:

Description:

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.

How to use it:

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;
}