Il plugin jQuery SwipeBox consente di creare una galleria fotografica in stile slideshow rivolta, in particolare, ai dispositivi mobili e agli eventi touch. Swipebox è semplice da usare, veloce ed è rilasciata con licenza MIT.

Creare una slideshow per dispositivi mobili con jQuery SwipeBox

Creare una slideshow per dispositivi mobili con jQuery SwipeBox

La galleria fotografica

La struttura html della galleria fotografica non è vincolante e consiste, come nella maggior parte dei casi, in una lista di miniature racchiuse in un collegamento che punta alla versione a dimensione reale dell’immagine, che sarà caricata quando l’utente seleziona l’immagine per visualizzarla.

<ul>
<li>
<a href="images/1.png">
<img src="images/t1.png" alt=" ">
</a></li>
<li>
<a href="images/2.png">
<img src="images/t2.png" alt=" ">
</a></li>
</ul>

Includere nell’intestazione del documento il foglio di stile del plugin (swipebox.css).

<link rel="stylesheet" type="text/css" href="css/swipebox.css">
</head>

Attivare jQuery Swipebox

Dopo aver incluso le immagini, scaricare e inserire una copia di jQuery e del plugin in fondo al documento, subito prima del tag di chiusura dell’elemento body. Di seguito inserire un altro elemento script per attivare jQuery Swipebox.

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.swipebox.min.js"></script>
<script>
$( 'ul li a' ).swipebox();
</script>
</body>
</html>

Per il corretto funzionamento di jQuery Swipebox è necessario inserire nel sito anche due immagini per i controlli di spostamento e per l’icona chiudi.Le immagini sono icons.svg e loader.gif e si trovano nella cartella compressa del plugin scaricata dal sito ufficiale. Dopo aver salvato le immagini all’interno del proprio sito aggiornare i percorsi delle immagini nel foglio di stile swipebox.css.

Altre informazioni ed esempi sono disponibili nel sito ufficiale del plugin.