<div class="content-section content-section--sticky ">
<div class="content-section__title text-button">instagram</div>
<div class="content-section__content">
<div class="instagram-feed">
<div class="instagram-feed__inner">
<a class="instagram-feed__link" href="#">
<figure class="image image--fluid instagram-feed__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20500%20500%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/300x300 300w, //via.placeholder.com/500x500 500w, //via.placeholder.com/1000x1000 1000w, //via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</a>
<a class="instagram-feed__link" href="#">
<figure class="image image--fluid instagram-feed__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20500%20500%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/300x300 300w, //via.placeholder.com/500x500 500w, //via.placeholder.com/1000x1000 1000w, //via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</a>
<a class="instagram-feed__link" href="#">
<figure class="image image--fluid instagram-feed__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20500%20500%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/300x300 300w, //via.placeholder.com/500x500 500w, //via.placeholder.com/1000x1000 1000w, //via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</a>
<a class="instagram-feed__link" href="#">
<figure class="image image--fluid instagram-feed__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20500%20500%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/300x300 300w, //via.placeholder.com/500x500 500w, //via.placeholder.com/1000x1000 1000w, //via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</a>
<a class="instagram-feed__link" href="#">
<figure class="image image--fluid instagram-feed__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20500%20500%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/300x300 300w, //via.placeholder.com/500x500 500w, //via.placeholder.com/1000x1000 1000w, //via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</a>
<a class="instagram-feed__link" href="#">
<figure class="image image--fluid instagram-feed__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20500%20500%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/300x300 300w, //via.placeholder.com/500x500 500w, //via.placeholder.com/1000x1000 1000w, //via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</a>
</div>
</div>
</div>
</div>
{% set content %}
<div class="instagram-feed">
<div class="instagram-feed__inner">
{% for item in data.items %}
<a class="instagram-feed__link" href="{{ item.link }}">
{% include '@image' with {class: "instagram-feed__image", modifier: "image--fluid", data: item.image|srcset('500x500')} %}
</a>
{% endfor %}
</div>
</div>
{% endset %}
{% include '@content-section' with {modifier: "content-section--sticky", data: {title: data.title, content: content} } %}
{
"language": "en-US",
"data": {
"title": "instagram",
"items": [
{
"image": true,
"link": "#"
},
{
"image": true,
"link": "#"
},
{
"image": true,
"link": "#"
},
{
"image": true,
"link": "#"
},
{
"image": true,
"link": "#"
},
{
"image": true,
"link": "#"
}
]
}
}
.instagram-feed {
overflow: auto;
width: 100%;
cursor: grab; /* stylelint-disable-line plugin/no-unsupported-browser-features */
margin-bottom: 76px;
border-bottom: 1px solid;
@include bp(sm-min) {
margin-bottom: 161px;
}
}
.instagram-feed__inner {
pointer-events: none;
position: relative;
display: flex;
}
.instagram-feed__link {
display: inline-block;
width: 28.6%;
flex-shrink: 0;
pointer-events: all;
overflow: hidden;
@include aspect-ratio(200, 200, 'instagram-feed__image');
&:after {
border: none;
position: relative;
}
&:before {
border: none;
position: relative;
}
}
.image__img {
.instagram-feed__link & {
width: 100%;
display: block;
filter: grayscale(100%); /* stylelint-disable-line plugin/no-unsupported-browser-features */
}
}
.instagram-feed__image {
pointer-events: none;
}
import './instagram-feed.scss';
import Component from '@component';
import MouseDownEvent = JQuery.MouseDownEvent;
import MouseMoveEvent = JQuery.MouseMoveEvent;
import MouseUpEvent = JQuery.MouseUpEvent;
import Helpers from '@helpers';
import ClickEvent = JQuery.ClickEvent;
export default class InstagramFeed extends Component {
static initSelector: string = '.instagram-feed';
draggableArea: JQuery;
mouseDown: boolean;
mouseMoved: boolean;
images: JQuery;
figures: JQuery;
startX: number;
constructor(element: HTMLElement) {
super(element);
this.draggableArea = this.element;
this.images = this.element.find('.instagram-feed__link');
this.figures = this.images.find('.image__img');
this.mouseDown = false;
this.init();
}
init(): void {
$(window).on('mousemove', this.scroll.bind(this));
$(window).on('mouseup', this.dragEndHandler.bind(this));
this.draggableArea.on('mousedown', this.dragStartHandler.bind(this));
this.images.on('mousedown', this.imageClickDownHandler.bind(this));
this.images.on('click', this.imageClickUpHandler.bind(this));
this.figures.on('load', this.fitFigures.bind(this));
}
fitFigures(): void {
this.figures.each((index: number, figure: HTMLElement): void => {
const figureRect: DOMRect = figure.getBoundingClientRect();
if (figureRect.width < figureRect.height) {
figure.style.width = '100%';
figure.style.maxWidth = '100%';
figure.style.height = 'auto';
figure.style.maxHeight = 'initial';
} else if (figureRect.height < figureRect.width) {
figure.style.width = 'auto';
figure.style.maxWidth = 'initial';
figure.style.height = '100%';
figure.style.maxHeight = '100%';
}
});
}
dragEndHandler(): void {
this.mouseDown = false;
}
dragStartHandler(event: MouseDownEvent): void {
this.mouseMoved = false;
this.mouseDown = true;
this.startX = event.pageX - this.draggableArea.offset().left;
}
imageClickDownHandler(event: MouseUpEvent): void {
event.preventDefault();
}
imageClickUpHandler(event: ClickEvent): void {
if (this.mouseMoved && !Helpers.isMobileDevice) {
event.preventDefault();
}
}
scroll(event: MouseMoveEvent): void {
if (this.mouseDown && event !== undefined) {
this.mouseMoved = true;
const x: number = event.pageX - this.draggableArea.offset().left;
const walk: number = (x - this.startX); // scroll-fast
this.draggableArea.scrollLeft(this.draggableArea.scrollLeft() - walk);
this.startX = x;
}
}
}