<figure class="image image--fluid ">
<a class="image__link" href="https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg" data-fancybox data-thumb="">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg" data-sizes="auto" alt="image title" class="image__img lazyload">
</a>
</figure>
{% set attributes -%}
data-fancybox{% if data.galleryId %}="{{ data.galleryId }}"{% endif %}
{%- if data.caption %} data-caption="{{ data.caption }}"{% endif %}
{%- if data.image %} data-thumb="{{ data.image.src }}"{% endif %}
{%- endset %}
{% include '@image' with {
data: data.image|srcset(imageSize),
modifier: 'image--fluid' ~ (imageModifier ? (' ' ~ imageModifier) : ''),
class: (imageClass ? imageClass : ''),
anchorAttributes: attributes
} %}
{
"language": "en-US",
"imageSize": "100x100",
"data": {
"image": {
"alt": "image title",
"url": "https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg",
"srcset": "https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg"
}
}
}
@import '@fancyapps/ui/dist/fancybox.css';
$lightbox-background: $L-lightbox-backdrop-color;
/* Opening animations - container and content */
.fancybox__container.is-animated[aria-hidden='false'] {
& .fancybox__backdrop,
& .fancybox__caption,
& .fancybox__nav,
& .carousel__dots,
& .carousel__button.is-close {
animation: .8s ease backwards fancybox-fadeIn;
}
}
.fancybox-fadeIn {
animation: .8s ease both fancybox-fadeIn;
}
/* Closing animations - container and content */
.fancybox__container.is-animated.is-closing {
& .fancybox__backdrop,
& .fancybox__caption,
& .fancybox__nav,
& .carousel__dots,
& .carousel__button.is-close {
animation: .8s ease both fancybox-fadeOut;
}
}
.fancybox-fadeOut {
animation: .8s ease both fancybox-fadeOut;
}
.fancybox__backdrop {
background: $lightbox-background;
}
.fancybox__toolbar {
padding: 12px;
@include bp(sm-min) {
padding: 24px;
}
}
.fancybox__caption {
position: absolute;
z-index: map-get($zindex, 'caption');
bottom: 112px;
font-size: $font-size-base;
line-height: $line-height-base;
letter-spacing: $letter-spacing-default;
@include bp(sm-min) {
bottom: 48px;
}
}
.lightbox__toolbar-close { // must override close button styles, because 4.0.27 version forces carousel__button style
width: auto;
height: auto;
padding: 4px;
font-size: 24px;
background-color: transparent;
@include bp(sm-min) {
padding: 0;
font-size: 36px;
}
&:hover {
color: $L-background-medium-hover;
}
&:active {
color: $L-background-medium-hover;
}
svg {
width: 1em;
height: 1em;
fill: currentColor;
stroke: none;
filter: none; /* stylelint-disable-line plugin/no-unsupported-browser-features */
}
}
.fancybox__slide.has-image {
padding: 12px;
@include bp(sm-min) {
padding: 80px 0;
}
@include bp(md-min) {
padding: 80px;
}
}
.fancybox__slide.has-video {
padding: 12px;
@include bp(sm-min) {
padding: 80px;
}
}
.fancybox__thumbs {
padding: 0 10px 24px;
@include bp(sm-min) {
padding: 0 12px 24px;
}
@include bp(md-min) {
padding: 0 12px 48px;
}
}
.carousel__slide {
.fancybox__thumbs & {
width: 50px;
padding: 8px 10px;
@include bp(sm-min) {
width: 75px;
padding: 8px 12px;
}
}
}
.fancybox__thumb {
border-radius: 0;
padding-top: 100%;
.fancybox__thumbs .carousel__slide &:after {
top: -4px;
right: -4px;
left: -4px;
bottom: -4px;
border-width: 2px;
border-color: $L-border;
border-radius: 0;
}
}
.lightbox__nav {
position: absolute;
bottom: 48px;
width: 40px;
height: 40px;
padding: 8px;
border-radius: $border-radius-base;
@include bp(sm-min) {
top: 50%;
transform: translateY(-50%);
}
}
.lightbox__nav--right {
right: 12px;
@include bp(sm-min) {
right: 24px;
}
}
.lightbox__nav--left {
left: 12px;
@include bp(sm-min) {
left: 24px;
}
}
.lightbox__spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
color: $L-text-strong;
font-size: 50px;
}
import { Fancybox } from '@fancyapps/ui';
import Icon from '../icon/icon';
import Spinner from '../spinner/spinner';
import './lightbox.scss';
// For more details about available options and plugins: https://fancyapps.com/docs/ui/fancybox
Fancybox.bind('[data-fancybox]', {
showClass: 'fancybox-fadeIn',
hideClass: 'fancybox-fadeOut',
mainClass: 'lightbox',
template: {
spinner: Spinner.render({
className: 'lightbox__spinner',
}),
},
Thumbs: {
autoStart: false,
},
Image: {
zoom: false,
},
Toolbar: {
display: ['close'],
items: {
...Fancybox.Plugins.Toolbar.defaults.items,
close: {
type: 'button',
label: 'CLOSE',
class: 'lightbox__toolbar-close',
html: Icon.render('close', ''),
attr: { 'data-fancybox-close': '', tabindex: 0 }, //eslint-disable-line
},
},
},
Carousel: {
Navigation: {
prevTpl: Icon.render('chevron-left', 'button__icon lightbox__nav-icon'),
nextTpl: Icon.render('chevron-right', 'button__icon lightbox__nav-icon'),
classNames: {
button: 'button button--icon button--secondary',
prev: 'lightbox__nav lightbox__nav--left',
next: 'lightbox__nav lightbox__nav--right',
},
},
},
});
<figure class="image image--fluid ">
<a class="image__link" href="https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg" data-fancybox data-caption="This is a caption" data-thumb="">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg" data-sizes="auto" alt="image title" class="image__img lazyload">
</a>
</figure>
{% set attributes -%}
data-fancybox{% if data.galleryId %}="{{ data.galleryId }}"{% endif %}
{%- if data.caption %} data-caption="{{ data.caption }}"{% endif %}
{%- if data.image %} data-thumb="{{ data.image.src }}"{% endif %}
{%- endset %}
{% include '@image' with {
data: data.image|srcset(imageSize),
modifier: 'image--fluid' ~ (imageModifier ? (' ' ~ imageModifier) : ''),
class: (imageClass ? imageClass : ''),
anchorAttributes: attributes
} %}
{
"language": "en-US",
"imageSize": "100x100",
"data": {
"image": {
"alt": "image title",
"url": "https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg",
"srcset": "https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg"
},
"caption": "This is a caption"
}
}
@import '@fancyapps/ui/dist/fancybox.css';
$lightbox-background: $L-lightbox-backdrop-color;
/* Opening animations - container and content */
.fancybox__container.is-animated[aria-hidden='false'] {
& .fancybox__backdrop,
& .fancybox__caption,
& .fancybox__nav,
& .carousel__dots,
& .carousel__button.is-close {
animation: .8s ease backwards fancybox-fadeIn;
}
}
.fancybox-fadeIn {
animation: .8s ease both fancybox-fadeIn;
}
/* Closing animations - container and content */
.fancybox__container.is-animated.is-closing {
& .fancybox__backdrop,
& .fancybox__caption,
& .fancybox__nav,
& .carousel__dots,
& .carousel__button.is-close {
animation: .8s ease both fancybox-fadeOut;
}
}
.fancybox-fadeOut {
animation: .8s ease both fancybox-fadeOut;
}
.fancybox__backdrop {
background: $lightbox-background;
}
.fancybox__toolbar {
padding: 12px;
@include bp(sm-min) {
padding: 24px;
}
}
.fancybox__caption {
position: absolute;
z-index: map-get($zindex, 'caption');
bottom: 112px;
font-size: $font-size-base;
line-height: $line-height-base;
letter-spacing: $letter-spacing-default;
@include bp(sm-min) {
bottom: 48px;
}
}
.lightbox__toolbar-close { // must override close button styles, because 4.0.27 version forces carousel__button style
width: auto;
height: auto;
padding: 4px;
font-size: 24px;
background-color: transparent;
@include bp(sm-min) {
padding: 0;
font-size: 36px;
}
&:hover {
color: $L-background-medium-hover;
}
&:active {
color: $L-background-medium-hover;
}
svg {
width: 1em;
height: 1em;
fill: currentColor;
stroke: none;
filter: none; /* stylelint-disable-line plugin/no-unsupported-browser-features */
}
}
.fancybox__slide.has-image {
padding: 12px;
@include bp(sm-min) {
padding: 80px 0;
}
@include bp(md-min) {
padding: 80px;
}
}
.fancybox__slide.has-video {
padding: 12px;
@include bp(sm-min) {
padding: 80px;
}
}
.fancybox__thumbs {
padding: 0 10px 24px;
@include bp(sm-min) {
padding: 0 12px 24px;
}
@include bp(md-min) {
padding: 0 12px 48px;
}
}
.carousel__slide {
.fancybox__thumbs & {
width: 50px;
padding: 8px 10px;
@include bp(sm-min) {
width: 75px;
padding: 8px 12px;
}
}
}
.fancybox__thumb {
border-radius: 0;
padding-top: 100%;
.fancybox__thumbs .carousel__slide &:after {
top: -4px;
right: -4px;
left: -4px;
bottom: -4px;
border-width: 2px;
border-color: $L-border;
border-radius: 0;
}
}
.lightbox__nav {
position: absolute;
bottom: 48px;
width: 40px;
height: 40px;
padding: 8px;
border-radius: $border-radius-base;
@include bp(sm-min) {
top: 50%;
transform: translateY(-50%);
}
}
.lightbox__nav--right {
right: 12px;
@include bp(sm-min) {
right: 24px;
}
}
.lightbox__nav--left {
left: 12px;
@include bp(sm-min) {
left: 24px;
}
}
.lightbox__spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
color: $L-text-strong;
font-size: 50px;
}
import { Fancybox } from '@fancyapps/ui';
import Icon from '../icon/icon';
import Spinner from '../spinner/spinner';
import './lightbox.scss';
// For more details about available options and plugins: https://fancyapps.com/docs/ui/fancybox
Fancybox.bind('[data-fancybox]', {
showClass: 'fancybox-fadeIn',
hideClass: 'fancybox-fadeOut',
mainClass: 'lightbox',
template: {
spinner: Spinner.render({
className: 'lightbox__spinner',
}),
},
Thumbs: {
autoStart: false,
},
Image: {
zoom: false,
},
Toolbar: {
display: ['close'],
items: {
...Fancybox.Plugins.Toolbar.defaults.items,
close: {
type: 'button',
label: 'CLOSE',
class: 'lightbox__toolbar-close',
html: Icon.render('close', ''),
attr: { 'data-fancybox-close': '', tabindex: 0 }, //eslint-disable-line
},
},
},
Carousel: {
Navigation: {
prevTpl: Icon.render('chevron-left', 'button__icon lightbox__nav-icon'),
nextTpl: Icon.render('chevron-right', 'button__icon lightbox__nav-icon'),
classNames: {
button: 'button button--icon button--secondary',
prev: 'lightbox__nav lightbox__nav--left',
next: 'lightbox__nav lightbox__nav--right',
},
},
},
});
<figure class="image image--fluid ">
<a class="image__link" href="//via.placeholder.com/1920x1080" data-fancybox="gallery-123" data-caption="This is a caption" data-thumb="//via.placeholder.com/75x75">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w, //via.placeholder.com/300x300 300w, //via.placeholder.com/400x400 400w, //via.placeholder.com/500x500 500w, //via.placeholder.com/600x600 600w, //via.placeholder.com/700x700 700w, //via.placeholder.com/800x800 800w, //via.placeholder.com/48x48 48w, //via.placeholder.com/96x96 96w" data-sizes="auto" alt="image title" class="image__img lazyload">
</a>
</figure>
<figure class="image image--fluid ">
<a class="image__link" href="//via.placeholder.com/1080x1920" data-fancybox="gallery-123" data-caption="This is another caption" data-thumb="//via.placeholder.com/75x75">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w, //via.placeholder.com/300x300 300w, //via.placeholder.com/400x400 400w, //via.placeholder.com/500x500 500w, //via.placeholder.com/600x600 600w, //via.placeholder.com/700x700 700w, //via.placeholder.com/800x800 800w, //via.placeholder.com/48x48 48w, //via.placeholder.com/96x96 96w" data-sizes="auto" alt="image title" class="image__img lazyload">
</a>
</figure>
<figure class="image image--fluid ">
<a class="image__link" href="//via.placeholder.com/1920x1080" data-fancybox="gallery-123" data-thumb="//via.placeholder.com/75x75">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w, //via.placeholder.com/300x300 300w, //via.placeholder.com/400x400 400w, //via.placeholder.com/500x500 500w, //via.placeholder.com/600x600 600w, //via.placeholder.com/700x700 700w, //via.placeholder.com/800x800 800w, //via.placeholder.com/48x48 48w, //via.placeholder.com/96x96 96w" data-sizes="auto" alt="image title" class="image__img lazyload">
</a>
</figure>
<figure class="image image--fluid ">
<a class="image__link" href="//via.placeholder.com/1080x1920" data-fancybox="gallery-123" data-thumb="//via.placeholder.com/75x75">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w, //via.placeholder.com/300x300 300w, //via.placeholder.com/400x400 400w, //via.placeholder.com/500x500 500w, //via.placeholder.com/600x600 600w, //via.placeholder.com/700x700 700w, //via.placeholder.com/800x800 800w, //via.placeholder.com/48x48 48w, //via.placeholder.com/96x96 96w" data-sizes="auto" alt="image title" class="image__img lazyload">
</a>
</figure>
<figure class="image image--fluid ">
<a class="image__link" href="//via.placeholder.com/1080x1920" data-fancybox="gallery-123" data-thumb="//via.placeholder.com/75x75">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w, //via.placeholder.com/300x300 300w, //via.placeholder.com/400x400 400w, //via.placeholder.com/500x500 500w, //via.placeholder.com/600x600 600w, //via.placeholder.com/700x700 700w, //via.placeholder.com/800x800 800w, //via.placeholder.com/48x48 48w, //via.placeholder.com/96x96 96w" data-sizes="auto" alt="image title" class="image__img lazyload">
</a>
</figure>
<figure class="image image--fluid ">
<a class="image__link" href="//via.placeholder.com/1080x1920" data-fancybox="gallery-123" data-thumb="//via.placeholder.com/75x75">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w, //via.placeholder.com/300x300 300w, //via.placeholder.com/400x400 400w, //via.placeholder.com/500x500 500w, //via.placeholder.com/600x600 600w, //via.placeholder.com/700x700 700w, //via.placeholder.com/800x800 800w, //via.placeholder.com/48x48 48w, //via.placeholder.com/96x96 96w" data-sizes="auto" alt="image title" class="image__img lazyload">
</a>
</figure>
<figure class="image image--fluid ">
<a class="image__link" href="//via.placeholder.com/1080x1920" data-fancybox="gallery-123" data-thumb="//via.placeholder.com/75x75">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w, //via.placeholder.com/300x300 300w, //via.placeholder.com/400x400 400w, //via.placeholder.com/500x500 500w, //via.placeholder.com/600x600 600w, //via.placeholder.com/700x700 700w, //via.placeholder.com/800x800 800w, //via.placeholder.com/48x48 48w, //via.placeholder.com/96x96 96w" data-sizes="auto" alt="image title" class="image__img lazyload">
</a>
</figure>
<figure class="image image--fluid ">
<a class="image__link" href="https://www.youtube.com/watch?v=z2X2HaTvkl8" data-fancybox="gallery-123" data-thumb="//via.placeholder.com/75x75">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w, //via.placeholder.com/300x300 300w, //via.placeholder.com/400x400 400w, //via.placeholder.com/500x500 500w, //via.placeholder.com/600x600 600w, //via.placeholder.com/700x700 700w, //via.placeholder.com/800x800 800w, //via.placeholder.com/48x48 48w, //via.placeholder.com/96x96 96w" data-sizes="auto" alt="image title" class="image__img lazyload">
</a>
</figure>
{% if data.items %}
{% for item in data.items %}
{% include '@lightbox' with {
imageSize: imageSize,
data: {
caption: item.caption,
galleryId: data.galleryId,
image: item.image,
},
} %}
{% endfor %}
{% endif %}
{
"language": "en-US",
"imageSize": "100x100",
"data": {
"image": {
"alt": "image title",
"url": "https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg",
"srcset": "https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg"
},
"galleryId": "gallery-123",
"items": [
{
"caption": "This is a caption",
"image": {
"src": "//via.placeholder.com/75x75",
"alt": "image title",
"url": "//via.placeholder.com/1920x1080"
}
},
{
"caption": "This is another caption",
"image": {
"src": "//via.placeholder.com/75x75",
"alt": "image title",
"url": "//via.placeholder.com/1080x1920"
}
},
{
"image": {
"src": "//via.placeholder.com/75x75",
"alt": "image title",
"url": "//via.placeholder.com/1920x1080"
}
},
{
"image": {
"src": "//via.placeholder.com/75x75",
"alt": "image title",
"url": "//via.placeholder.com/1080x1920"
}
},
{
"image": {
"src": "//via.placeholder.com/75x75",
"alt": "image title",
"url": "//via.placeholder.com/1080x1920"
}
},
{
"image": {
"src": "//via.placeholder.com/75x75",
"alt": "image title",
"url": "//via.placeholder.com/1080x1920"
}
},
{
"image": {
"src": "//via.placeholder.com/75x75",
"alt": "image title",
"url": "//via.placeholder.com/1080x1920"
}
},
{
"image": {
"src": "//via.placeholder.com/75x75",
"alt": "image title",
"url": "https://www.youtube.com/watch?v=z2X2HaTvkl8"
}
}
]
}
}
@import '@fancyapps/ui/dist/fancybox.css';
$lightbox-background: $L-lightbox-backdrop-color;
/* Opening animations - container and content */
.fancybox__container.is-animated[aria-hidden='false'] {
& .fancybox__backdrop,
& .fancybox__caption,
& .fancybox__nav,
& .carousel__dots,
& .carousel__button.is-close {
animation: .8s ease backwards fancybox-fadeIn;
}
}
.fancybox-fadeIn {
animation: .8s ease both fancybox-fadeIn;
}
/* Closing animations - container and content */
.fancybox__container.is-animated.is-closing {
& .fancybox__backdrop,
& .fancybox__caption,
& .fancybox__nav,
& .carousel__dots,
& .carousel__button.is-close {
animation: .8s ease both fancybox-fadeOut;
}
}
.fancybox-fadeOut {
animation: .8s ease both fancybox-fadeOut;
}
.fancybox__backdrop {
background: $lightbox-background;
}
.fancybox__toolbar {
padding: 12px;
@include bp(sm-min) {
padding: 24px;
}
}
.fancybox__caption {
position: absolute;
z-index: map-get($zindex, 'caption');
bottom: 112px;
font-size: $font-size-base;
line-height: $line-height-base;
letter-spacing: $letter-spacing-default;
@include bp(sm-min) {
bottom: 48px;
}
}
.lightbox__toolbar-close { // must override close button styles, because 4.0.27 version forces carousel__button style
width: auto;
height: auto;
padding: 4px;
font-size: 24px;
background-color: transparent;
@include bp(sm-min) {
padding: 0;
font-size: 36px;
}
&:hover {
color: $L-background-medium-hover;
}
&:active {
color: $L-background-medium-hover;
}
svg {
width: 1em;
height: 1em;
fill: currentColor;
stroke: none;
filter: none; /* stylelint-disable-line plugin/no-unsupported-browser-features */
}
}
.fancybox__slide.has-image {
padding: 12px;
@include bp(sm-min) {
padding: 80px 0;
}
@include bp(md-min) {
padding: 80px;
}
}
.fancybox__slide.has-video {
padding: 12px;
@include bp(sm-min) {
padding: 80px;
}
}
.fancybox__thumbs {
padding: 0 10px 24px;
@include bp(sm-min) {
padding: 0 12px 24px;
}
@include bp(md-min) {
padding: 0 12px 48px;
}
}
.carousel__slide {
.fancybox__thumbs & {
width: 50px;
padding: 8px 10px;
@include bp(sm-min) {
width: 75px;
padding: 8px 12px;
}
}
}
.fancybox__thumb {
border-radius: 0;
padding-top: 100%;
.fancybox__thumbs .carousel__slide &:after {
top: -4px;
right: -4px;
left: -4px;
bottom: -4px;
border-width: 2px;
border-color: $L-border;
border-radius: 0;
}
}
.lightbox__nav {
position: absolute;
bottom: 48px;
width: 40px;
height: 40px;
padding: 8px;
border-radius: $border-radius-base;
@include bp(sm-min) {
top: 50%;
transform: translateY(-50%);
}
}
.lightbox__nav--right {
right: 12px;
@include bp(sm-min) {
right: 24px;
}
}
.lightbox__nav--left {
left: 12px;
@include bp(sm-min) {
left: 24px;
}
}
.lightbox__spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
color: $L-text-strong;
font-size: 50px;
}
import { Fancybox } from '@fancyapps/ui';
import Icon from '../icon/icon';
import Spinner from '../spinner/spinner';
import './lightbox.scss';
// For more details about available options and plugins: https://fancyapps.com/docs/ui/fancybox
Fancybox.bind('[data-fancybox]', {
showClass: 'fancybox-fadeIn',
hideClass: 'fancybox-fadeOut',
mainClass: 'lightbox',
template: {
spinner: Spinner.render({
className: 'lightbox__spinner',
}),
},
Thumbs: {
autoStart: false,
},
Image: {
zoom: false,
},
Toolbar: {
display: ['close'],
items: {
...Fancybox.Plugins.Toolbar.defaults.items,
close: {
type: 'button',
label: 'CLOSE',
class: 'lightbox__toolbar-close',
html: Icon.render('close', ''),
attr: { 'data-fancybox-close': '', tabindex: 0 }, //eslint-disable-line
},
},
},
Carousel: {
Navigation: {
prevTpl: Icon.render('chevron-left', 'button__icon lightbox__nav-icon'),
nextTpl: Icon.render('chevron-right', 'button__icon lightbox__nav-icon'),
classNames: {
button: 'button button--icon button--secondary',
prev: 'lightbox__nav lightbox__nav--left',
next: 'lightbox__nav lightbox__nav--right',
},
},
},
});