Vai al contenuto principale

Bootstrap Italia

Interfacce Web Accessibili per la PA

Thumbnav

Thumbnav

Componente di navigazione con immagini thumbnail.

Il componente Thumbnav consiste in una lista <ul> con classe .thumb-nav contenente tanti elementi <li> quante sono i link/thumbnail richiesti.

Ogni elemento <li> deve contenere un resizer proporzionale come da esempio per mantenere le corrette proporzioni di 3:2 a prescindere dalle dimensioni dell’immagine utilizzata per la thumbnail.

Per indicare il link/thumbail attivo applicare la classe .active al relativo tag <a>.

Accessibilità

Per ragioni di accessibilità è importante indicare all’interno dell’attributo alt="" dell’immagine thumbnail l’azione associata al link relativo.

  • Visualizza immagine 1
  • Visualizza immagine 2
  • Visualizza immagine 3 

1
2
3
4
5
6
7
8
9
10
11

<ul class="thumb-nav">
    <li>
      <a href="#" class="active ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1056" alt="Visualizza immagine 1"></a>
    </li>
    <li>
      <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1050" alt="Visualizza immagine 2"></a>
    </li>
    <li>
      <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1044" alt="Visualizza immagine 3"></a>
    </li>
</ul>

Versione small

Applicando la classe .thumb-nav-small al contenitore .thumb-nav si otterranno thumbnail di dimensione ridotta.

  • Visualizza immagine 1
  • Visualizza immagine 2
  • Visualizza immagine 3 

1
2
3
4
5
6
7
8
9
10
11

<ul class="thumb-nav thumb-nav-small">
    <li>
      <a href="#" class="active ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1056" alt="Visualizza immagine 1"></a>
    </li>
    <li>
      <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1050" alt="Visualizza immagine 2"></a>
    </li>
    <li>
      <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1044" alt="Visualizza immagine 3"></a>
    </li>
</ul>

Stati hover

Applicando delle classi predefinite al contenitore .thumb-nav è possibile customizzare l’effetto di hover.

Hover senza zoom

Utilizzare la classe .thumb-nav-nozoom per disabilitare l’effetto di zoom sull’immagine.

  • Visualizza immagine 1
  • Visualizza immagine 2
  • Visualizza immagine 3 

1
2
3
4
5
6
7
8
9
10
11

<ul class="thumb-nav thumb-nav-nozoom">
    <li>
      <a href="#" class="active ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1056" alt="Visualizza immagine 1"></a>
    </li>
    <li>
      <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1050" alt="Visualizza immagine 2"></a>
    </li>
    <li>
      <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1044" alt="Visualizza immagine 3"></a>
    </li>
</ul>

Hover con layer nero

Utilizzare la classe .thumb-nav-black per ottenere un effetto di overlay nero trasparente sull’immagine.

  • Visualizza immagine 1
  • Visualizza immagine 2
  • Visualizza immagine 3 

1
2
3
4
5
6
7
8
9
10
11

<ul class="thumb-nav thumb-nav-black">
    <li>
      <a href="#" class="active ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1056" alt="Visualizza immagine 1"></a>
    </li>
    <li>
      <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1050" alt="Visualizza immagine 2"></a>
    </li>
    <li>
      <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1044" alt="Visualizza immagine 3"></a>
    </li>
</ul>

Hover con layer primary

Utilizzare la classe .thumb-nav-primary per ottenere un effetto di overlay di colore primary sull’immagine.

  • Visualizza immagine 1
  • Visualizza immagine 2
  • Visualizza immagine 3 

1
2
3
4
5
6
7
8
9
10
11

<ul class="thumb-nav thumb-nav-primary">
    <li>
      <a href="#" class="active ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1056" alt="Visualizza immagine 1"></a>
    </li>
    <li>
      <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1050" alt="Visualizza immagine 2"></a>
    </li>
    <li>
      <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1044" alt="Visualizza immagine 3"></a>
    </li>
</ul>

Thumbnav verticale

Applicando la classe .thumb-nav-vertical al contenitore .thumb-nav si ottiene una versione verticale della Thumbnav.

  • Visualizza immagine 1
  • Visualizza immagine 2
  • Visualizza immagine 3 

1
2
3
4
5
6
7
8
9
10
11

<ul class="thumb-nav thumb-nav-vertical">
    <li>
      <a href="#" class="active ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1056" alt="Visualizza immagine 1"></a>
    </li>
    <li>
      <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1050" alt="Visualizza immagine 2"></a>
    </li>
    <li>
      <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1044" alt="Visualizza immagine 3"></a>
    </li>
</ul>

Posizione in overlay

La Thumbnav può essere inserita in overlay all’interno di un contenitore come ad esempio una galleria immagini. Il contenitore dovrà utilizzare la classe di Bootstrap .position-relative per posizionare correttamente la Thumbnav al proprio interno. Alla Thumbnav dovrà essere applicata una classe a scelta fra:

  • .thumb-nav-bottom per posizonarla nella parte inferiore
  • .thumb-nav-top per posizonarla nella parte superiore
  • .thumb-nav-left per posizonare una thumbnav vertical nella parte sinistra
  • .thumb-nav-right per posizonare una thumbnav vertical nella parte destra

Overlay orizzontale inferiore

Descrizione immagine
  • Visualizza immagine 1
  • Visualizza immagine 2
  • Visualizza immagine 3 

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div class="test-gallery position-relative">
  <img src="https://picsum.photos/1280/720?image=1056" class="test-image" alt="Descrizione immagine"/>
  <ul class="thumb-nav thumb-nav-small thumb-nav-bottom">
      <li>
        <a href="#" class="active ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1056" alt="Visualizza immagine 1"></a>
      </li>
      <li>
        <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1050" alt="Visualizza immagine 2"></a>
      </li>
      <li>
        <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1044" alt="Visualizza immagine 3"></a>
      </li>
  </ul>
</div>

Overlay orizzontale top

Descrizione immagine
  • Visualizza immagine 1
  • Visualizza immagine 2
  • Visualizza immagine 3 

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div class="test-gallery position-relative">
  <img src="https://picsum.photos/1280/720?image=1056" class="test-image" alt="Descrizione immagine"/>
  <ul class="thumb-nav thumb-nav-small thumb-nav-top">
      <li>
        <a href="#" class="active ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1056" alt="Visualizza immagine 1"></a>
      </li>
      <li>
        <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1050" alt="Visualizza immagine 2"></a>
      </li>
      <li>
        <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1044" alt="Visualizza immagine 3"></a>
      </li>
  </ul>
</div>

Overlay verticale a sinistra

Descrizione immagine Descrizione immagine
  • Visualizza immagine 1
  • Visualizza immagine 2
  • Visualizza immagine 3 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div class="test-gallery position-relative">
  <img src="https://picsum.photos/720/720?image=1056" class="d-md-none test-image" alt="Descrizione immagine"/>
  <img src="https://picsum.photos/1280/720?image=1056" class="d-none d-md-block test-image" alt="Descrizione immagine"/>
  <ul class="thumb-nav thumb-nav-vertical thumb-nav-small thumb-nav-left">
      <li>
        <a href="#" class="active ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1056" alt="Visualizza immagine 1"></a>
      </li>
      <li>
        <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1050" alt="Visualizza immagine 2"></a>
      </li>
      <li>
        <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1044" alt="Visualizza immagine 3"></a>
      </li>
  </ul>
</div>

Overlay verticale a destra

Descrizione immagine Descrizione immagine
  • Visualizza immagine 1
  • Visualizza immagine 2
  • Visualizza immagine 3 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div class="test-gallery position-relative">
  <img src="https://picsum.photos/720/720?image=1056" class="d-md-none test-image" alt="Descrizione immagine"/>
  <img src="https://picsum.photos/1280/720?image=1056" class="d-none d-md-block test-image" alt="Descrizione immagine"/>
  <ul class="thumb-nav thumb-nav-vertical thumb-nav-small thumb-nav-right">
      <li>
        <a href="#" class="active ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1056" alt="Visualizza immagine 1"></a>
      </li>
      <li>
        <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1050" alt="Visualizza immagine 2"></a>
      </li>
      <li>
        <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1044" alt="Visualizza immagine 3"></a>
      </li>
  </ul>
</div>

Griglia a larghezza fissa

Applicando la classe .thumb-nav-fixed alla Thumbnav le thumbnail avranno una larghezza fissa di 240px oppure di 120px se è stata utilizzata anche la classe .thumb-nav-small.

  • Visualizza immagine 1
  • Visualizza immagine 2
  • Visualizza immagine 3
  • Visualizza immagine 4
  • Visualizza immagine 5 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<ul class="thumb-nav thumb-nav-fixed">
    <li>
      <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1056" alt="Visualizza immagine 1"></a>
    </li>
    <li>
      <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1050" alt="Visualizza immagine 2"></a>
    </li>
    <li>
      <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1044" alt="Visualizza immagine 3"></a>
    </li>
    <li>
      <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1057" alt="Visualizza immagine 4"></a>
    </li>
    <li>
      <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1037" alt="Visualizza immagine 5"></a>
    </li>
</ul>

Griglia a larghezza automatica

Applicando la classe .thumb-nav-auto alla Thumbnav le thumbnail occuperanno automaticamente l’intera larghezza del contenitore. È necessario indicare il numero degli elementi presenti su ogni riga con una delle seguenti classi aggiuntive:

  • .thumb-nav-auto-2 per ottenere 2 thumb per riga
  • .thumb-nav-auto-3 per ottenere 3 thumb per riga
  • .thumb-nav-auto-4 per ottenere 4 thumb per riga
  • .thumb-nav-auto-5 per ottenere 5 thumb per riga

Esempio: 3 thumbnail per riga

  • Visualizza immagine 1
  • Visualizza immagine 2
  • Visualizza immagine 3
  • Visualizza immagine 4
  • Visualizza immagine 5 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<ul class="thumb-nav thumb-nav-auto thumb-nav-auto-3">
    <li>
      <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/390/260?image=1056" alt="Visualizza immagine 1"></a>
    </li>
    <li>
      <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/390/260?image=1050" alt="Visualizza immagine 2"></a>
    </li>
    <li>
      <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/390/260?image=1044" alt="Visualizza immagine 3"></a>
    </li>
    <li>
      <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/390/260?image=1057" alt="Visualizza immagine 4"></a>
    </li>
    <li>
      <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/390/260?image=1037" alt="Visualizza immagine 5"></a>
    </li>
</ul>

Esempio: 5 thumbnail per riga

  • Visualizza immagine 1
  • Visualizza immagine 2
  • Visualizza immagine 3
  • Visualizza immagine 4
  • Visualizza immagine 5 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<ul class="thumb-nav thumb-nav-auto thumb-nav-auto-5">
    <li>
      <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1056" alt="Visualizza immagine 1"></a>
    </li>
    <li>
      <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1050" alt="Visualizza immagine 2"></a>
    </li>
    <li>
      <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1044" alt="Visualizza immagine 3"></a>
    </li>
    <li>
      <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1057" alt="Visualizza immagine 4"></a>
    </li>
    <li>
      <a href="#" class="ratio ratio-3x2"><img src="https://picsum.photos/240/160?image=1037" alt="Visualizza immagine 5"></a>
    </li>
</ul>

Properties

Il selettore da utilizzare per le sovrascrittura delle property è .thumb-nav. La descrizione delle custom properties è in inglese perché risiede nei files .scss dei componenti.

Properties statiche

Variabile CSS Descrizione (Inglese) Predefinito
--bsi-thumb-nav-gap Controls the spacing between thumb items, using spacing tokens. var(--bsi-spacing-xxs)
--bsi-thumb-nav-auto-basis-offset Controls the offset subtracted from auto layout item widths, using spacing tokens. var(--bsi-spacing-s)
--bsi-thumb-nav-overlay-offset Controls the external offset for overlay-positioned variants, using spacing tokens. var(--bsi-spacing-s)
--bsi-thumb-nav-item-width Controls the default width for each thumb item. 240px
--bsi-thumb-nav-item-width-small Controls the width for thumb items in small variant. 120px
--bsi-thumb-nav-item-height-small-vertical Controls the height for vertical + small thumb items. 80px
--bsi-thumb-nav-overlay-bg-primary Controls the default overlay background color for thumb states. var(--bsi-overlay-background-primary)
--bsi-thumb-nav-overlay-bg-black Controls the default overlay background color for thumb states. var(--bsi-overlay-background-light)
--bsi-thumb-nav-hover-scale Controls the image zoom scale on hover. 1.05
--bsi-thumb-nav-transition-duration Controls the base transition duration for overlay and image transform. 0.4s
--bsi-thumb-nav-transition-duration-hover Controls the transition duration applied during hover state. 1s
--bsi-thumb-nav-transition-easing Controls the easing curve used by thumb-nav transitions. cubic-bezier(0.15, 0.7, 0.36, 0.99)