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
.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<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://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine" 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://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-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://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
</span>
</a>
</div>
</div>
</div>
Tipi di griglia
Standard
La griglia utilizzata è una variante delle classi di Bootstrap, con margini modificati.
Il contenitore della griglia è .it-grid-list-wrapper
. Al posto della classe .row
di Bootstrap viene utilizzata la classe custom .grid-row
.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<div class="it-grid-list-wrapper">
<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://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
</div>
</div>
</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://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
</div>
</div>
</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://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
</div>
</div>
</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://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
</div>
</div>
</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://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
</div>
</div>
</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://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
Standard con didascalie
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
.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<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://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-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://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-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://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-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://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-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://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-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://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
</span>
</a>
</div>
</div>
</div>
</div>
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<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://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-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://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-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://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-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://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
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 responsiva.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<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://via.placeholder.com/400x300/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-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://via.placeholder.com/400x500/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-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://via.placeholder.com/400x700/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-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://via.placeholder.com/400x600/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-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://via.placeholder.com/400x500/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-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://via.placeholder.com/400x400/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-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://via.placeholder.com/400x600/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-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://via.placeholder.com/400x500/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-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://via.placeholder.com/400x400/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-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://via.placeholder.com/400x600/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-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://via.placeholder.com/400x500/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-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://via.placeholder.com/400x400/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
</div>
</div>
<span class="it-griditem-text-wrapper">
<span class="it-griditem-text">Didascalia</span>
<svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
</span>
</a>
</div>
</div>
</div>
</div>
Abilitare Masonry via JavaScript
È possibile abilitare Masonry manualmente utilizzando questo script:
1
2
3
4
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) |