Author: | bendc |
---|---|
Views Total: | 4,524 views |
Official Page: | Go to website |
Last Update: | April 25, 2020 |
License: | MIT |
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; }