10 migliori plugin per slideshow responsive gratuite con jQuery
Vista la la crescente diffusione di smartphone e tablet per navigare in internet, è di fondamentale importanza realizzare layout adattabili alle differenti risoluzioni. Aspetto ancora più importante se le pagine web contengono una certa quantità di immagini, vedi il caso di un portfolio o di gallerie fotografiche. In questo caso la soluzione più adatta è affidarsi a slideshow responsive.
Gli script per crearle sono diversi, in questo articolo verranno prese in esame quelle realizzate con plugin jQuery gratuiti.
REFINESLIDE
Uno degli slider più completi grazie ai quattordici effetti di transizione che abbelliscono lo scorrimento delle immagini, l’adattabilità a qualsiasi risoluzione, la compatibilità con la maggioranza dei browser, anche i più datati, e la possibilità di inserire una descrizione HTML (la cosiddetta caption) sovrapposta alle immagini. Nonostante questo alto numero di opzioni risulta di facile installazione e configurazione. Ecco perché Refline Slider va considerato come una delle migliori soluzioni per realizzare una images gallery responsive sul proprio sito.
Tutorial — Visualizza la demo — Scarica il file sorgente
RESPONSIVE SLIDES
Con questo piccolo plugin jQuery (appena 1,4Kb di dimensioni) è possibile creare una slide responsive compatibile con una vasta gamma di browser, tra cui IE 6 e successive. Lo scorrimento delle immagini, che devono obbligatoriamente avere le medesime dimensioni, può essere automatico o tramite impaginazione posizionata nella parte inferiore della gallery.
Tutorial — Visualizza la demo — Scarica il file sorgente
ELASTIC SLIDESHOW
Con questo tutorial è possibile realizzare uno slider ad elastico, dotato della classica anteprima sotto forma di miniature ed adattabile alle dimensione della pagina. La navigazione può avvenire cliccando sulle immagini della thumbnail o sfruttando l’autoplay.
È realizzato con una tecnica mista che sfrutta CSS e Javascript.
Tutorial – Visualizza la demo — Scarica il file sorgente
ELASTISLIDE
Adattabile alle dimensioni del nostro sito e a qualsiasi risoluzione dello schermo. In poche parole una galleria di immagini fluida da disporre in orizzontale o in verticale, a seconda del layout delle pagine che la conterranno. Queste sono le caratteristiche salienti di Elastislide, un plugin jQuery che tiene da conto estetica e funzionalità per un webdesign al 100% responsive.
Tutorial – Visualizza la demo — Scarica il file sorgente
RESPONSIVE IMAGE GALLERY
Galleria d’immagini tra le più complete, visto il lungo elenco di caratteristiche. Passare da una foto all’altra è semplice e veloce grazie alle classiche frecce di scorrimento in avanti e in dietro, mentre la thumbnail consente di visualizzare il numero di immagini presenti e le rispettive miniature. Questo plugin, che graficamente si ispira alla Galleria utente di Twitter, prende spunto da Elastislide al quale sono state aggiunte l’opzione per abilitare/disabilitare le miniature e la possibilità di navigare utilizzando la tastiera.
Tutorial — Visualizza la demo — Scarica il file sorgente
FLEXSLIDER
Diapositive da posizionare in verticale e in orizzontale. Transizione tra le immagini con effetto dissolvenza. Piena compatibilità con l’ultima versione di jQuery. Markup semantico. Supporto dei principali browser. Alta personalizzazione per adattarlo a qualsiasi esigenza.
Questo, in breve, è Flexislider.
Un potente tool per creare una galleria immagini a scorrimento, graficamente piacevole ed adattabile alle dimensioni delle pagine. Un plugin che ha riscosso un certo successo visto che è stata realizzata la versione da installare su WordPress. È compatibile con Safari 4 +, Chrome 4 +, Firefox 3.6 +, Opera 10 +, e IE7 +. Nei dispositivi iOS e Android sono supportate le versioni a partire da jQuery 1.3.
Tutorial — Visualizza la demo — Scarica il file sorgente
RESPONSIVE THUMBNAIL GALLERY
Con questo plugin jQuery è possibile creare una images gallery adattabile alle dimensioni della pagina che la contiene, navigare tra le immagini sfruttando la thumbnail che funge anche da anteprima. Non sono però previsti cursori per far scorrere le immagini. Plugin estremamente semplice nel codice, con parametri personalizzabili quali:
- thumbImages: percorso della thumbnails
- smallImages: percorso per le immagini di piccole dimensioni
- largeImages: percorso per le immagini di grandi dimensioni
- count: numero delle immagini/thumbnails
- thumbImageType: estensione dei file per le immagini della thumbnail
- imageType: estensione dei file per la galleria immagini
- breakpoint: dimensione, in larghezza, con cui vengono scambiate le immagini piccole e grandi
- shadowStrength: dimensioni dell’ombra sulle immagini
Tutorial – Visualizza la demo — Scarica il file sorgente
BLUEBERRY
Plugin open source appositamente scritto da Mark Tyrrel per il webdesign responsive, da utilizzare in layout fluidi. L’autore resosi conto della incompatibilità della griglia 1140px di essgrid.net con i layout flessibili, ha deciso di realizzarne uno ad hoc. Tutto questo per venire incontro alla crescente domanda di siti ottimizzati per i dispositivi mobili.
Compatibile con le ultime versioni di Firefox, Chrome, Opera, Safari e con Internet Explorer 9, consente ridimensionamento veloce e fluido della slideshow al ridimensionamento della pagina.
Tutorial – Visualizza la demo – Scarica il file sorgente
FOTORAMA
Tra i più versatili e performanti plugin jQuery, vuoi per le funzionalità, vuoi per la grafica. È infatti possibile adattarlo a pagine web fisse e fluide, è facilmente navigabile grazie agli scroller verticali e orizzontali ai quali si può alternare un efficace autoplay. La presenza di una thumbnail, altamente personalizzabile, permette di creare gallery ordinate ed allo stesso tempo dal grande impatto.
Cosa rende Fotorama il plugin con una marcia in più?
La risposta è semplice, basti pensare alle caratteristiche principali. Overlay sulle immagini con logo, testo, link e barra di navigazione. Possibilità di inserire banner in verticale e in orizzontale, rispetto la pagina, e di una caption HTML.
Disponibile una versione per WordPress a questo indirizzo http://fotoramajs.com/plug-in/
Tutorial — Visualizza la demo — Scarica il file sorgente
S3SLIDER JQUERY PLUGIN
Plugin diverso dai precedenti in quanto non permette lo scorrimento manuale tra le immagini, così come non è prevista la presenza di una thumbnail. A mio avviso una pecca non da poco, ma che non inficia più di tanto la sua utilità. S3Slider ricorda le presentazioni realizzate con PowerPoint (il software presente nel pacchetto Office), per via di un passaggio tra le immagine sottolineato dal classico effetto dissolvenza. L’aspetto interessante è la presenza di una didascalia in sovrimpressione, nella quale collocare le informazioni importanti. È possibile personalizzarla scegliendo in che posizione collocarla (alto, basso, destra o sinistra).
Un plugin semplice, ma che può essere preso in considerazione.
Tutorial — Visualizza la demo — Scarica il file sorgente
L'Autore
Mi occupo di grafica e webdesign da un decennio. Da un paio di anni mi sono avvicinato al mondo della scrittura online, come webwriter e content editor. Mi reputo fortunato per aver trasformato in lavoro due grandi passioni.
5 Commenti
Bella collezione, Fotorama non lo conoscevo e mi sembra molto interessante e completo.
Mi permetto di segnalare iView Slider, plugin jquery che ho usato nel mio ultimo progetto responsivo.
Tutorial: http://iprodev.com/iview/index4.html
Demo versione responsiva: http://iprodev.com/iview/index4.html
Scarica il file sorgente: http://iprodev.com/wp-content/plugins/download-monitor/download.php?id=6
Si ottima raccolta, quindi in automatico ridimensionano le immagini?
Se uso il sito con lo slideshow con iphone o ipad lo ridimensiona in base alle dimensioni giusto??
[...] un precedente articolo ho parlato di plugin jQuery per creare slideshow responsive, soffermandomi su quelli che ritengo [...]
[...] 10 migliori plugin per slideshow responsive gratuite con jQuery Vista la la crescente diffusione di smartphone e tablet per navigare in internet, è di fondamentale importanza realizzare layout adattabili alle differenti risoluzioni. Aspetto ancora più importante se le pagine web contengono una certa quantità di immagini, vedi il caso di un portfolio o di gallerie fotografiche. In questo caso la soluzione più adatta è [...] [...]
@Kall3 grazie per la segnalazione, sono andato a vedere il plugin e mi pare interessante.
@Marck si esatto.