andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add gallery snippets

Browse Source
This commit is contained in:
Chalarangelo
2022-04-29 20:37:30 +03:00
parent 2c29ee4c05
commit bba469098f
2 changed files with 254 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
snippets/horizontal-gallery.md Normal file
View File

@ -0,0 +1,123 @@
---
title: Image gallery with horizontal scroll
tags: visual,interactivity
expertise: advanced
firstSeen: 2022-05-01T05:00:00-04:00
---
Creates a horizontally scrollable image gallery.
- Position the `.thumbnails` at the bottom of the container using `position: absolute`.
- Use `scroll-snap-type: x mandatory` and `overscroll-behavior-x: contain` to create a snap effect on horizontal scroll. Snap elements to the start of the container using `scroll-snap-align: start`.
- Hide scrollbars using `scrollbar-width: none` and styling the pseudo-element `::-webkit-scrollbar` to `display: none`.
- Use `Element.scrollTo()` to define a `scrollToElement` function, that scrolls the gallery to the given item.
- Use `Array.prototype.map()` and `Array.prototype.join()` to populate the `.thumbnails` element. Give each thumbnail a `data-id` attribute with the index of the image.
- Use `Document.querySelectorAll()` to get all the thumbnail elements. Use `Array.prototype.forEach()` to register a handler for the `'click'` event on each thumbnail, using `EventTarget.addEventListener()` and the `scrollToElement` function.
- Use `Document.querySelector()` and `EventTarget.addEventListener()` to register a handler for the `'scroll'` event. Update the `.thumbnails` element to match the current scroll position, using the `highlightThumbnail` function.
```html
<div class="gallery-container">
<div class="thumbnails"></div>
<div class="slides">
<div><img src="https://picsum.photos/id/1067/540/720"></div>
<div><img src="https://picsum.photos/id/122/540/720"></div>
<div><img src="https://picsum.photos/id/188/540/720"></div>
<div><img src="https://picsum.photos/id/249/540/720"></div>
<div><img src="https://picsum.photos/id/257/540/720"></div>
<div><img src="https://picsum.photos/id/259/540/720"></div>
<div><img src="https://picsum.photos/id/283/540/720"></div>
<div><img src="https://picsum.photos/id/288/540/720"></div>
<div><img src="https://picsum.photos/id/299/540/720"></div>
</div>
</div>
```
```css
.gallery-container {
position: relative;
display: flex;
justify-content: center;
}
.thumbnails {
position: absolute;
bottom: 8px;
display: flex;
flex-direction: row;
gap: 6px;
}
.thumbnails div {
width: 8px;
height: 8px;
cursor: pointer;
background: #aaa;
border-radius: 100%;
}
.thumbnails div.highlighted {
background-color: #777;
}
.slides {
margin: 0 16px;
display: grid;
grid-auto-flow: column;
gap: 1rem;
width: 540px;
padding: 0 0.25rem;
height: 720px;
overflow-y: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.slides > div {
scroll-snap-align: start;
}
.slides img {
width: 540px;
object-fit: contain;
}
.slides::-webkit-scrollbar {
display: none;
}
```
```js
const slideGallery = document.querySelector('.slides');
const slides = slideGallery.querySelectorAll('div');
const thumbnailContainer = document.querySelector('.thumbnails');
const slideCount = slides.length;
const slideWidth = 540;
const highlightThumbnail = () => {
thumbnailContainer
.querySelectorAll('div.highlighted')
.forEach(el => el.classList.remove('highlighted'));
const index = Math.floor(slideGallery.scrollLeft / slideWidth);
thumbnailContainer
.querySelector(`div[data-id="${index}"]`)
.classList.add('highlighted');
};
const scrollToElement = el => {
const index = parseInt(el.dataset.id, 10);
slideGallery.scrollTo(index * slideWidth, 0);
};
thumbnailContainer.innerHTML += [...slides]
.map((slide, i) => `<div data-id="${i}"></div>`)
.join('');
thumbnailContainer.querySelectorAll('div').forEach(el => {
el.addEventListener('click', () => scrollToElement(el));
});
slideGallery.addEventListener('scroll', e => highlightThumbnail());
highlightThumbnail();
```

131
snippets/vertical-gallery.md Normal file
View File

@ -0,0 +1,131 @@
---
title: Image gallery with vertical scroll
tags: visual,interactivity
expertise: advanced
firstSeen: 2022-05-05T05:00:00-04:00
---
Creates a horizontally scrollable image gallery.
- Use `display: flex` and `justify-content: center` to setup the layout for the container.
- Use `display: flex` and `flex-direction: column` to setup the layout for the slides.
- Use `scroll-snap-type: y mandatory` and `overscroll-behavior-y: contain` to create a snap effect on vertical scroll. Snap elements to the start of the container using `scroll-snap-align: start`.
- Hide scrollbars using `scrollbar-width: none` and styling the pseudo-element `::-webkit-scrollbar` to `display: none`.
- Use `Element.scrollTo()` to define a `scrollToElement` function, that scrolls the gallery to the given item.
- Use `Array.prototype.map()` and `Array.prototype.join()` to populate the `.thumbnails` element. Give each thumbnail a `data-id` attribute with the index of the image.
- Use `Document.querySelectorAll()` to get all the thumbnail elements. Use `Array.prototype.forEach()` to register a handler for the `'click'` event on each thumbnail, using `EventTarget.addEventListener()` and the `scrollToElement` function.
- Use `Document.querySelector()` and `EventTarget.addEventListener()` to register a handler for the `'scroll'` event. Update the `.thumbnails` and `.scrollbar` elements to match the current scroll position, using the `scrollThumb` function.
```html
<div class="gallery-container">
<div class="thumbnails"></div>
<div class="scrollbar">
<div class="thumb"></div>
</div>
<div class="slides">
<div><img src="https://picsum.photos/id/1067/540/720"></div>
<div><img src="https://picsum.photos/id/122/540/720"></div>
<div><img src="https://picsum.photos/id/188/540/720"></div>
<div><img src="https://picsum.photos/id/249/540/720"></div>
<div><img src="https://picsum.photos/id/257/540/720"></div>
<div><img src="https://picsum.photos/id/259/540/720"></div>
<div><img src="https://picsum.photos/id/283/540/720"></div>
<div><img src="https://picsum.photos/id/288/540/720"></div>
<div><img src="https://picsum.photos/id/299/540/720"></div>
</div>
</div>
```
```css
.gallery-container {
display: flex;
justify-content: center;
}
.thumbnails {
display: flex;
flex-direction: column;
gap: 8px;
}
.thumbnails img {
width: 40px;
height: 40px;
cursor: pointer;
}
.scrollbar {
width: 1px;
height: 720px;
background: #ccc;
display: block;
margin: 0 0 0 8px;
}
.thumb {
width: 1px;
position: absolute;
height: 0;
background: #000;
}
.slides {
margin: 0 16px;
display: grid;
grid-auto-flow: row;
gap: 1rem;
width: calc(540px + 1rem);
padding: 0 0.25rem;
height: 720px;
overflow-y: auto;
overscroll-behavior-y: contain;
scroll-snap-type: y mandatory;
scrollbar-width: none;
}
.slides > div {
scroll-snap-align: start;
}
.slides img {
width: 540px;
object-fit: contain;
}
.slides::-webkit-scrollbar {
display: none;
}
```
```js
const slideGallery = document.querySelector('.slides');
const slides = slideGallery.querySelectorAll('div');
const scrollbarThumb = document.querySelector('.thumb');
const slideCount = slides.length;
const slideHeight = 720;
const marginTop = 16;
const scrollThumb = () => {
const index = Math.floor(slideGallery.scrollTop / slideHeight);
scrollbarThumb.style.height = `${((index + 1) / slideCount) * slideHeight}px`;
};
const scrollToElement = el => {
const index = parseInt(el.dataset.id, 10);
slideGallery.scrollTo(0, index * slideHeight + marginTop);
};
document.querySelector('.thumbnails').innerHTML += [...slides]
.map(
(slide, i) => `<img src="${slide.querySelector('img').src}" data-id="${i}">`
)
.join('');
document.querySelectorAll('.thumbnails img').forEach(el => {
el.addEventListener('click', () => scrollToElement(el));
});
slideGallery.addEventListener('scroll', e => scrollThumb());
scrollThumb();
```