Liste di immagini
La lista di immagini è un componente flessibile per la visualizzazione di serie di immagini sotto forma di griglia.
Elemento singolo
Di seguito gli esempi di elemento singolo della lista di immagini:
- Immagine semplice
- Immagine con didascalia in basso
- Immagine con didascalia sovrapposta
Per utilizzare la didascalia sovrapposta è sufficiente aggiungere la classe .it-grid-item-overlay al div .it-grid-item-wrapper.
<div class="row">
<div class="col-12 col-lg-4">
<div class="it-grid-item-wrapper">
<a href="#">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://dummyimage.com/800x600/ebebeb/808080/?text=800x600" alt="descrizione immagine"></div>
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="it-grid-item-wrapper">
<a href="#">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://dummyimage.com/800x600/ebebeb/808080/?text=800x600" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia<span class="it-griditem-copyright">copyright Mario Rossi</span></span>
<svg class="icon">
<use href="./dist/svg/sprite.svg#it-info-circle"></use>
</svg>
</span>
</a>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="it-grid-item-wrapper it-grid-item-overlay">
<a href="#">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://dummyimage.com/800x600/ebebeb/808080/?text=800x600" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon">
<use href="./dist/svg/sprite.svg#it-info-circle"></use>
</svg>
</span>
</a>
</div>
</div>
</div> Griglia
Per la corretta formattazione degli spazi di questo tipo di griglia, occorre aggiungere la classe .it-image-label-grid al div .it-grid-list-wrapper.
<div class="it-grid-list-wrapper it-image-label-grid">
<div class="grid-row">
<div class="col-6 col-lg-4">
<div class="it-grid-item-wrapper">
<a href="#">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://dummyimage.com/800x600/ebebeb/808080/?text=800x600" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon">
<use href="./dist/svg/sprite.svg#it-info-circle"></use>
</svg>
</span>
</a>
</div>
</div>
<div class="col-6 col-lg-4">
<div class="it-grid-item-wrapper">
<a href="#">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://dummyimage.com/800x600/ebebeb/808080/?text=800x600" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia<span class="it-griditem-copyright">copyright Mario Rossi</span></span>
<svg class="icon">
<use href="./dist/svg/sprite.svg#it-info-circle"></use>
</svg>
</span>
</a>
</div>
</div>
<div class="col-6 col-lg-4">
<div class="it-grid-item-wrapper">
<a href="#">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://dummyimage.com/800x600/ebebeb/808080/?text=800x600" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon">
<use href="./dist/svg/sprite.svg#it-info-circle"></use>
</svg>
</span>
</a>
</div>
</div>
<div class="col-6 col-lg-4">
<div class="it-grid-item-wrapper">
<a href="#">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://dummyimage.com/800x600/ebebeb/808080/?text=800x600" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon">
<use href="./dist/svg/sprite.svg#it-info-circle"></use>
</svg>
</span>
</a>
</div>
</div>
<div class="col-6 col-lg-4">
<div class="it-grid-item-wrapper">
<a href="#">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://dummyimage.com/800x600/ebebeb/808080/?text=800x600" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon">
<use href="./dist/svg/sprite.svg#it-info-circle"></use>
</svg>
</span>
</a>
</div>
</div>
<div class="col-6 col-lg-4">
<div class="it-grid-item-wrapper">
<a href="#">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://dummyimage.com/800x600/ebebeb/808080/?text=800x600" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon">
<use href="./dist/svg/sprite.svg#it-info-circle"></use>
</svg>
</span>
</a>
</div>
</div>
</div>
</div> Griglia proporzionale
La griglia proporzionale contiene elementi griglia con immagine e testo in overlay.
Per la corretta formattazione degli spazi di questo tipo di griglia occorre aggiungere la classe .it-quilted-grid al div .it-grid-list-wrapper.
La griglia utilizza le classi di Bootstrap .col- per realizzare il layout colonnare.
I tipi di immagini utilizzabili sono sostanzialmente 2:
- standard
- orizzontale (con larghezza doppia rispetto all’immagine standard e di altezza uguale)
Per utilizzare l’immagine orizzontale, occorre aggiungere la classe .it-grid-item-double-w al div .it-grid-item-wrapper che contiene l’immagine.
<div class="it-grid-list-wrapper it-quilted-grid">
<div class="grid-row">
<div class="col-12 col-md-6">
<div class="it-grid-item-wrapper it-grid-item-overlay">
<a href="#">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://dummyimage.com/800x600/ebebeb/808080/?text=800x600" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon">
<use href="./dist/svg/sprite.svg#it-info-circle"></use>
</svg>
</span>
</a>
</div>
</div>
<div class="col-12 col-md-6">
<div class="grid-row">
<div class="col-6">
<div class="it-grid-item-wrapper it-grid-item-overlay">
<a href="#">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://dummyimage.com/800x600/ebebeb/808080/?text=800x600" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia<span class="it-griditem-copyright">copyright Mario Rossi</span></span>
<svg class="icon">
<use href="./dist/svg/sprite.svg#it-info-circle"></use>
</svg>
</span>
</a>
</div>
</div>
<div class="col-6">
<div class="it-grid-item-wrapper it-grid-item-overlay">
<a href="#">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://dummyimage.com/800x600/ebebeb/808080/?text=800x600" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon">
<use href="./dist/svg/sprite.svg#it-info-circle"></use>
</svg>
</span>
</a>
</div>
</div>
<div class="col-12">
<div class="it-grid-item-wrapper it-grid-item-overlay it-grid-item-double-w">
<a href="#">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://dummyimage.com/800x300/ebebeb/808080/?text=800x300" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon">
<use href="./dist/svg/sprite.svg#it-info-circle"></use>
</svg>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div> Griglia masonry
Masonry è incluso in Bootstrap Italia.
Per un elenco di tutti i possibili parametri di configurazione consultare la documentazione completa.
Aggiungendo data-bs-toggle="masonry" al contenitore row, verrà attivato l’effetto Masonry sulla griglia responsive.
<div class="container-fluid">
<div class="row it-masonry" data-bs-toggle="masonry">
<div class="col-sm-6 col-lg-4 mb-4">
<div class="it-grid-item-wrapper">
<a href="#">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://dummyimage.com/400x300/ebebeb/808080/?text=400x300" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon">
<use href="./dist/svg/sprite.svg#it-info-circle"></use>
</svg>
</span>
</a>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="it-grid-item-wrapper">
<a href="#">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://dummyimage.com/400x500/ebebeb/808080/?text=400x500" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia<span class="it-griditem-copyright">copyright Mario Rossi</span></span>
<svg class="icon">
<use href="./dist/svg/sprite.svg#it-info-circle"></use>
</svg>
</span>
</a>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="it-grid-item-wrapper">
<a href="#">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://dummyimage.com/400x700/ebebeb/808080/?text=400x700" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon">
<use href="./dist/svg/sprite.svg#it-info-circle"></use>
</svg>
</span>
</a>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="it-grid-item-wrapper">
<a href="#">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://dummyimage.com/400x600/ebebeb/808080/?text=400x600" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon">
<use href="./dist/svg/sprite.svg#it-info-circle"></use>
</svg>
</span>
</a>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="it-grid-item-wrapper">
<a href="#">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://dummyimage.com/400x500/ebebeb/808080/?text=400x500" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon">
<use href="./dist/svg/sprite.svg#it-info-circle"></use>
</svg>
</span>
</a>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="it-grid-item-wrapper">
<a href="#">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://dummyimage.com/400x400/ebebeb/808080/?text=400x400" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon">
<use href="./dist/svg/sprite.svg#it-info-circle"></use>
</svg>
</span>
</a>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="it-grid-item-wrapper">
<a href="#">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://dummyimage.com/400x600/ebebeb/808080/?text=400x600" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon">
<use href="./dist/svg/sprite.svg#it-info-circle"></use>
</svg>
</span>
</a>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="it-grid-item-wrapper">
<a href="#">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://dummyimage.com/400x500/ebebeb/808080/?text=400x500" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon">
<use href="./dist/svg/sprite.svg#it-info-circle"></use>
</svg>
</span>
</a>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="it-grid-item-wrapper">
<a href="#">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://dummyimage.com/400x400/ebebeb/808080/?text=400x400" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon">
<use href="./dist/svg/sprite.svg#it-info-circle"></use>
</svg>
</span>
</a>
</div>
</div>
</div>
</div> Griglia masonry via Javascript
È possibile abilitare Masonry manualmente utilizzando questo script:
var elementList = [].slice.call(document.querySelectorAll('.it-masonry'));
var masonryList = elementList.map(function (element) {
return new bootstrap.Masonry(element)
}) Elenco dei metodi disponibili:
| Metodo | Descrizione |
|---|---|
| dispose | Rimuove le funzionalità Masonry |
| getInstance | Metodo statico che restituisce l'istanza Masonry associata ad un elemento del DOM. Esempio: bootstrap.Masonry.getInstance(element) |
| getOrCreateInstance | Metodo statico che restituisce un'istanza Masonry associata ad un elemento del DOM o ne crea una nuova nel caso non fosse stata inizializzata. Esempio: bootstrap.Masonry.getOrCreateInstance(element) |