<section class="rtds-video-gallery">
<div class="rtds-container rtds-space-y-4 md:rtds-space-y-6">
<div>
<div class="rtds-section-header">
<div class="rtds-flex rtds-items-center rtds-gap-4 md:rtds-gap-6 rtds-content-01">
<div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-2 md:rtds-gap-4">
<div class="rtds-vertical-divider rtds-w-4 md:rtds-w-6 lg:rtds-w-8">
<img class="rtds-w-full rtds-h-auto" src="/images/vertical-divider.svg" alt="">
</div>
<h2 class="rtds-heading-3 md:rtds-heading-2">Galleria fotografica</h2>
</div>
</div>
</div>
</div>
<ul class="rtds-grid rtds-grid-cols-1 md:rtds-grid-cols-2 lg:rtds-grid-cols-3 xl:rtds-grid-cols-4 rtds-gap-4">
<li>
<a href="../../images/bubbles.jpg" class="rtds-lightbox" data-group="gallery">
<img src="../../images/bubbles.jpg" alt="Descrizione immagine 1">
</a>
</li>
<li>
<a href="../../images/card-image.jpg" class="rtds-lightbox" data-group="gallery">
<img src="../../images/card-image.jpg" alt="Descrizione immagine 2">
</a>
</li>
<li>
<a href="../../images/bubbles.jpg" class="rtds-lightbox" data-group="gallery">
<img src="../../images/bubbles.jpg" alt="Descrizione immagine 1">
</a>
</li>
<li>
<a href="../../images/card-image.jpg" class="rtds-lightbox" data-group="gallery">
<img src="../../images/card-image.jpg" alt="Descrizione immagine 2">
</a>
</li>
<li>
<a href="../../images/bubbles.jpg" class="rtds-lightbox" data-group="gallery">
<img src="../../images/bubbles.jpg" alt="Descrizione immagine 1">
</a>
</li>
<li>
<a href="../../images/card-image.jpg" class="rtds-lightbox" data-group="gallery">
<img src="../../images/card-image.jpg" alt="Descrizione immagine 2">
</a>
</li>
<li>
<a href="../../images/bubbles.jpg" class="rtds-lightbox" data-group="gallery">
<img src="../../images/bubbles.jpg" alt="Descrizione immagine 1">
</a>
</li>
<li>
<a href="../../images/card-image.jpg" class="rtds-lightbox" data-group="gallery">
<img src="../../images/card-image.jpg" alt="Descrizione immagine 2">
</a>
</li>
<li>
<a href="../../images/bubbles.jpg" class="rtds-lightbox" data-group="gallery">
<img src="../../images/bubbles.jpg" alt="Descrizione immagine 1">
</a>
</li>
<li>
<a href="../../images/card-image.jpg" class="rtds-lightbox" data-group="gallery">
<img src="../../images/card-image.jpg" alt="Descrizione immagine 2">
</a>
</li>
</ul>
</div>
</section>
<section class="rtds-video-gallery{% if classes %} {{ classes }}{% endif %}">
<div class="rtds-container rtds-space-y-4 md:rtds-space-y-6">
<div>
{% render '@section-header' + sectionHeader.variant , sectionHeader.context, true %}
</div>
<ul class="rtds-grid {{ galleryGrid }} rtds-gap-4">
{% for item in items %}
<li>
<a href="{{ item.image | path }}" class="rtds-lightbox{% if aspectVideo %} rtds-lightbox--video{% endif %}" data-group="{{ dataGroup }}">
<img src="{{ item.image | path }}" alt="{{ item.alt }}">
</a>
</li>
{% endfor %}
</ul>
</div>
</section>
{
"dataGroup": "gallery",
"sectionHeader": {
"variant": "--divider-left",
"context": {
"heading": "Galleria fotografica"
}
},
"galleryGrid": "rtds-grid-cols-1 md:rtds-grid-cols-2 lg:rtds-grid-cols-3 xl:rtds-grid-cols-4",
"items": [
{
"image": "/images/bubbles.jpg",
"alt": "Descrizione immagine 1"
},
{
"image": "/images/card-image.jpg",
"alt": "Descrizione immagine 2"
},
{
"image": "/images/bubbles.jpg",
"alt": "Descrizione immagine 1"
},
{
"image": "/images/card-image.jpg",
"alt": "Descrizione immagine 2"
},
{
"image": "/images/bubbles.jpg",
"alt": "Descrizione immagine 1"
},
{
"image": "/images/card-image.jpg",
"alt": "Descrizione immagine 2"
},
{
"image": "/images/bubbles.jpg",
"alt": "Descrizione immagine 1"
},
{
"image": "/images/card-image.jpg",
"alt": "Descrizione immagine 2"
},
{
"image": "/images/bubbles.jpg",
"alt": "Descrizione immagine 1"
},
{
"image": "/images/card-image.jpg",
"alt": "Descrizione immagine 2"
}
]
}
@layer components {
.tobii__slide figure>figcaption {
--caption-color: #ffffff;
@apply rtds-text-sm md:rtds-text-base;
}
.rtds-lightbox {
@apply rtds-block;
}
.rtds-lightbox:where(:not(.rtds-lightbox--video)) {
@apply rtds-aspect-3-2;
}
.rtds-lightbox:where(.rtds-lightbox--video) {
@apply rtds-aspect-video;
}
.rtds-lightbox img {
@apply rtds-w-full rtds-h-full rtds-object-cover rtds-object-center;
}
}
document.addEventListener('DOMContentLoaded', () => {
/* INITIALIZE TOBII GALLERY */
const lightboxElements = document.querySelectorAll('.rtds-lightbox');
if (lightboxElements.length > 0) {
const tobii = new Tobii({
selector: '.rtds-lightbox',
zoom: false,
navLabel: ["Immagine precedente", "Immagine successiva"],
closeLabel: "Esci dalla gallery",
dialogTitle: "Lightbox - Dettaglio immagine galleria",
loadingIndicatorLabel: "Caricamento in corso"
});
}
});
Galleria di immagini con lightbox.
Per una migliore accessibilità, il componente è basato sulla libreria tobii-lightbox.
I link della galleria devono avere la classe rtds-lightbox.
Per il raggruppamento delle gallerie, è necessario utilizzare l’attributo data-group con lo stesso valore su tutti i link delle immagini della galleria.
Le immagini devono avere l’attributo alt.
<a href="../../images/feathers.jpg" class="rtds-lightbox" data-group="gallery">
<img src="../../images/thumb-gallery.jpg" alt="Gallery Image 1">
</a>