<div class="mosaik-gallery">
<div class="container caption">
At vero eos et accusam et justo duo dolores et ea rebum.
</div>
<div class="gallery-grid">
<div class="gallery-grid-item" style="background-image: url('https://images.unsplash.com/photo-1503428593586-e225b39bddfe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80')"></div>
<div class="gallery-grid-item" style="background-image: url('https://images.unsplash.com/photo-1560439514-4e9645039924?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80')"></div>
<div class="gallery-grid-item" style="background-image: url('https://images.unsplash.com/photo-1561489396-888724a1543d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80')"></div>
<div class="gallery-grid-item" style="background-image: url('https://images.unsplash.com/photo-1472691681358-fdf00a4bfcfe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1049&q=80')"></div>
<div class="gallery-grid-item" style="background-image: url('https://images.unsplash.com/photo-1505373877841-8d25f7d46678?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80')"></div>
<div class="gallery-grid-item" style="background-image: url('https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80')"></div>
</div>
<div class="gallery-overlay ">
<div class="gallery-overlay-dimmer"></div>
<div class="gallery-overlay-content">
<button class="gallery-overlay-close">
<i class="fal fa-times "></i>
</button>
<div class="gallery-overlay-slider">
<div class="image-gallery-item">
<img class="image" src="https://images.unsplash.com/photo-1503428593586-e225b39bddfe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="">
</div>
<div class="image-gallery-item">
<img class="image" src="https://images.unsplash.com/photo-1560439514-4e9645039924?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" alt="">
</div>
<div class="image-gallery-item">
<img class="image" src="https://images.unsplash.com/photo-1561489396-888724a1543d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="">
</div>
<div class="image-gallery-item">
<img class="image" src="https://images.unsplash.com/photo-1472691681358-fdf00a4bfcfe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1049&q=80" alt="">
</div>
<div class="image-gallery-item">
<img class="image" src="https://images.unsplash.com/photo-1505373877841-8d25f7d46678?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="">
</div>
<div class="image-gallery-item">
<img class="image" src="https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="mosaik-gallery">
<div class="container caption">
{{ title }}
</div>
<div class="gallery-grid">
{% for item in items %}
<div class="gallery-grid-item" style="background-image: url('{{ item }}')"></div>
{% endfor %}
</div>
{% render "@components/02-components/overlay-gallery/overlay-gallery.twig" with {
items: items,
is_open: false
} %}
</div>
{
"title": "At vero eos et accusam et justo duo dolores et ea rebum.",
"items": [
"https://images.unsplash.com/photo-1503428593586-e225b39bddfe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80",
"https://images.unsplash.com/photo-1560439514-4e9645039924?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80",
"https://images.unsplash.com/photo-1561489396-888724a1543d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80",
"https://images.unsplash.com/photo-1472691681358-fdf00a4bfcfe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1049&q=80",
"https://images.unsplash.com/photo-1505373877841-8d25f7d46678?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80",
"https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
]
}
$('.mosaik-gallery .gallery-grid-item').click(function clickHandlerevt(evt) {
var index = $( ".mosaik-gallery .gallery-grid-item" ).index( evt.target );
$('.mosaik-gallery .gallery-overlay-slider').slick('slickGoTo', index, true);
$(this).closest('.mosaik-gallery').find('.gallery-overlay').toggleClass('is-open');
});
$('.gallery-overlay-dimmer').click(function() {
$(this).closest('.mosaik-gallery').find('.gallery-overlay').removeClass('is-open');
});
$('.gallery-overlay-close').click(function() {
$(this).closest('.mosaik-gallery').find('.gallery-overlay').removeClass('is-open');
});
.mosaik-gallery {
.caption {
@extend .text-medium;
margin-bottom: 2rem;
}
.gallery-grid {
overflow: hidden;
.gallery-grid-item {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 50%;
cursor: pointer;
&::before {
content: "";
display: block;
width: 100%;
padding-bottom: 70%;
}
@include media-breakpoint-up(sm) {
width: 33.333%;
}
@include media-breakpoint-up(md) {
width: 25%;
}
@include media-breakpoint-up(lg) {
width: 20%;
}
@include media-breakpoint-up(xl) {
}
}
}
}
There are no notes for this item.