Soluzioni Hosting

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

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.

TutorialVisualizza la demoScarica il file sorgente

 


RESPONSIVE SLIDES

ResponsiveSlides.js v1.53

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.

TutorialVisualizza la demoScarica il file sorgente

 


ELASTIC SLIDESHOW

ElasticImageSlideshow

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 demoScarica il file sorgente

 


ELASTISLIDE

Elastislide–A Responsive jQuery Carousel Plugin

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 demoScarica il file sorgente

 


RESPONSIVE IMAGE GALLERY

Responsive Image Gallery with Thumbnail Carousel

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.

TutorialVisualizza la demoScarica il file sorgente

 


FLEXSLIDER

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.

TutorialVisualizza la demoScarica il file sorgente

 


RESPONSIVE THUMBNAIL GALLERY

Responsive Thumbnail Gallery Plugin

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 demoScarica il file sorgente

 


BLUEBERRY

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

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/

TutorialVisualizza la demoScarica il file sorgente

 


S3SLIDER JQUERY PLUGIN

s3slider

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.

TutorialVisualizza la demoScarica il file sorgente

Andrea "Murales" Mi occupo di grafica e web design 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 Comments

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *