Swipe js – scorrere le foto col dito tramite javascript

Ormai gli smartphone con schermo touch-screen sono così diffusi che per la costruzione di un sito web non è più possibile ignorare le modalità di interazione dell’utente durante la navigazione tramite questi dispositivi.

In questo caso mi soffermo sulla questione di rappresentare una galleria d’immagini o slideshow in una pagina web. Cioè potrebbe capitare l’esigenza di sviluppare un slideshow di foto o comunque di box HTML (contenitori <div> di codice html con dimensioni predefinite). Esistono una miriade di soluzioni sviluppate soprattutto con jQuery e che presentano le frecce ai lati per scorrere.

È comunque utile tenere in considerazione l’interazione tipica dell’utente smartphone, che preferisce scorrere le immagini col semplice trascinamento del dito sullo schermo. Quindi una ottima e moderna soluzione sarebbe quella di aggiungere a questo slideshow un controllo per sfogliare le foto in questa maniera se sei collegato con un dispositivo touch-screen.

Uno dei migliori plug-in javascript che permette un simile controllo è SWIPE.

Swipe infatti permette di far scorrere le immagini con trascinamento o scorrimento del dito direttamente sullo schermo, rendendo la navigazione fra le foto sicuramente più affascinante e produttiva.

Esistono anche altri plugin javascript simili, ma pochi tengono conto di tutte le regole che un cursore come questo dovrebbe seguire.

Utilizzando Swipe, è possibile monitorare la posizione del tocco e spostare il contenuto esattamente come desiderato. Per esempio, se si cerca di trascinare la prima immagine di un galleria (quindi quella che si trova più a sinistra solitamente), pian piano lo script aumenterà la resistenza allo scorrimento, cioè l’immagine comincerà a scorrere sempre più lentamente (anche se state scorrendo col dito con forza) finché si blocca al limite, rendendo evidente che avete raggiunto la fine della galleria. Questo rilevamento sia al limite sinistro e destro.

Oppure, quando un utente ruota il dispositivo (e a sua volta causa il ridimensionamento della finestra del browser), lo script effettua l’automatico riadattamento delle dimensioni e degli elementi di scorrimento. È possibile anche impostare una larghezza al contenitore, che designa la larghezza di ciascun elemento diapositiva.

Ma uno dei maggiori pregi dello script SwipeJS è sicuramente la “Scroll prevention”, spesso trascurato da altri script simili. SwipeJS infatti rileva se si sta tentando di scorrere la pagina (quindi con un scorrimento del dito lungo una linea verticale) o il contenuto delle diapositive da sinistra a destra e viceversa (quindi con un scorrimento del dito lungo una linea orizzontale).

Vediamo ora un esempio di costruzione di una mini galleria.

Conviene visualizzare il tutto tramite smartphone per apprezzare al meglio le potenzialità di questo javascript.

Condividi questo articolo su:

Facebook Twitter Linkedin Digg Email

Leave a Comment

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">


sei − = 1