<div class="c-snapshot c-snapshot--gallery " aria-hidden="true">
<p class="c-snapshot__title">GALLERY</p>
<div class="c-snapshot__thumbnail">
<section class="c-carousel c-carousel--gallery" aria-hidden="true">
<div class="jsInstance owl-carousel">
<img src="https://picsum.photos/270/205" class="u-OF-cover" alt="">
<img src="https://picsum.photos/180/205" class="u-OF-cover" alt="">
<img src="https://picsum.photos/270/205" class="u-OF-cover" alt="">
</div>
</section> <button class="c-snapshot__button js-fr-dialogmodal-open js-snapshot-button" aria-controls="dialog-gallery">
<span class="u-visuallyhidden">Apri la gallery</span>
<svg class="c-icon c-icon--24">
<use xlink:href="#ic-zoom-24px"></use>
</svg> </button>
</div>
<p>Air Dolomiti all'Aeroporto di Bologna</p>
</div>
<div class="c-dialog c-dialog--gallery js-fr-dialogmodal " id="dialog-gallery">
<div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="dialog-gallery-dialog-title">
<div role="document">
<p class="c-dialog__title u-visuallyhidden" id="dialog-gallery-dialog-title" aria-hidden="true">Titolo della gallery</p>
<section class="c-carousel c-carousel--big-gallery c-carousel--big-gallery c-carousel--top-nav" aria-hidden="true">
<div class="jsInstance owl-carousel">
<div class="c-carousel__item">
<img src="https://picsum.photos/800/533" alt="">
<p class="img-desc">Image description 1</p>
</div>
<div class="c-carousel__item">
<img src="https://picsum.photos/300/533" alt="">
<p class="img-desc">Image description 2</p>
</div>
<div class="c-carousel__item">
<img src="https://picsum.photos/800/533" alt="">
<p class="img-desc">Image description 3</p>
</div>
<div class="c-carousel__item">
<img src="https://picsum.photos/800/533" alt="">
<p class="img-desc">Image description 4</p>
</div>
<div class="c-carousel__item">
<img src="https://picsum.photos/800/533" alt="">
<p class="img-desc">Image description 5</p>
</div>
</div>
</section> <button type="button" class="c-dialog__close js-fr-dialogmodal-close" aria-label="Chiudi la modale">
<svg class="c-icon c-icon--32">
<use xlink:href="#ic_close_black_24px"></use>
</svg> </button>
</div>
</div>
</div>
<div class="c-snapshot c-snapshot--gallery {{ modifier }}" aria-hidden="true">
{{#if title}}
<p class="c-snapshot__title">{{ title }}</p>
{{/if}}
<div class="c-snapshot__thumbnail">
{{> @carousel--gallery gallery }}
<button class="c-snapshot__button js-fr-dialogmodal-open js-snapshot-button" aria-controls="dialog-gallery">
<span class="u-visuallyhidden">Apri la gallery</span>
{{> @icon icon-zoom-in }}
</button>
</div>
<p>{{ caption }}</p>
</div>
{{ render "@dialog--gallery" }}
{
"target-id": "snapshot-1",
"img": {
"src": "/images/amsterdam.jpg",
"alt": "Amsterdam"
},
"icon-zoom-in": {
"symbol": "ic-zoom-24px",
"class": "c-icon c-icon--24"
},
"icon-download": {
"symbol": "ic-download-24px",
"class": "c-icon c-icon--24"
},
"caption": "Air Dolomiti all'Aeroporto di Bologna",
"title": "GALLERY",
"gallery": {
"modifier": "c-carousel--gallery",
"images": [
{
"img-path": "https://picsum.photos/270/205",
"img-class": "u-OF-cover"
},
{
"img-path": "https://picsum.photos/180/205",
"img-class": "u-OF-cover"
},
{
"img-path": "https://picsum.photos/270/205",
"img-class": "u-OF-cover"
}
]
}
}
.c-snapshot {
background-color: #fff;
border-radius: remify(16px);
overflow: hidden;
display: inline-block;
padding: 0;
@include shadow(medium);
position: relative;
background: linear-gradient(180deg, #FFFFFF 39%, #EAF2FB 135.82%, #F4F4F4 144.03%);
/* Night/10 */
border: 2px solid #E7EBEF;
margin-top: remify(0px);
margin-bottom: remify(32px);
padding-bottom: remify(0px);
p {
padding: 0 remify(16px) remify(12px);
.c-canvas__paper & {
margin-bottom: 0;
}
}
.c-canvas__sidebar &,
.o-adjacent__item & {
width: 100%;
}
.c-canvas__sidebar & {
// margin-top: remify(16px);
}
.c-snapshot__button,
.c-snapshot__download-link {
position: absolute;
bottom: remify(8px);
z-index: 100;
}
.c-snapshot__button {
right: 0;
background-color: transparent;
border: none;
}
.c-snapshot__download-link {
left: remify(48px);
}
}
p.c-snapshot__title {
text-transform: uppercase;
color: primary(night, 100);
font-weight: fw(bold);
margin-top: remify(12px);
margin-bottom: remify(12px);
padding-bottom: 0;
}
.c-snapshot__title + .c-snapshot__thumbnail {
margin-top: 0;
}
.c-snapshot__thumbnail {
display: block;
height: remify(200px);
width: 100%;
// max-width: remify(300px);
margin-bottom: remify(12px);
position: relative;
img {
width: 100%;
height: 100%;
}
.c-canvas__sidebar & {
width: 100%;
max-width: initial;
}
}
.c-snapshot__lightbox {
/** Default lightbox to hidden */
display: none;
/** Position and style */
width: remify(600px);
text-align: center;
position: absolute;
z-index: 999;
top: -50%;
left: 50%;
transform: translateX(-50%);
img {
width: remify(600px);
height: remify(400px);
}
}
.c-snapshot__lightbox.is-visible {
display: block;
}
/*------------------------------------*\
Video modifier
\*------------------------------------*/
.c-snapshot--video {
.c-snapshot__thumbnail {
max-width: initial;
}
p {
text-transform: initial;
}
.c-snapshot__thumbnail {
height: auto;
iframe {
width: 100%;
}
}
}
/*------------------------------------*\
Gallery modifier
\*------------------------------------*/
.c-snapshot--gallery {
// To avoid that .c-snapshot--gallery remains visible when the big gallery is open
z-index: 0;
p {
text-transform: initial;
}
.c-snapshot__thumbnail {
margin-left: auto;
margin-right: auto;
max-width: remify(300px);
}
}
(function($) {
var $snapshotThumbnail = $('.js-snapshot-thumbnail');
var $snapshotLightbox = $('.js-snapshot-lightbox');
$snapshotThumbnail.each( function() {
var thumb = $(this);
thumb.click(function() {
$(this).next($snapshotLightbox).addClass('is-visible');
});
$snapshotLightbox.click(function() {
$(this).removeClass('is-visible');
});
});
})(jQuery);
No notes defined.