Skip to main content

Bootstrap Italia

Il tema Bootstrap 5 per lo sviluppo di applicazioni web 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 
<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 
<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 
<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 
<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 
<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 
<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 
<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 
<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 
<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 
<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 
<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 
<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 
<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>