Vai al contenuto

Foto panoramiche con jQuery Panorama Viewer

jQuery Panorama Viewer è un piccolo plugin jQuery che consente di incorporare foto panoramiche nel proprio sito web.

 

jQuery Panorama Viewer

 

Il plugin dal peso di circa 6.00 kb ( 2.89 kb compresso) è stato creato da Pete R., fondatore di Travelistly and BucketListly ed è molto semplice da implementare nelle proprie pagine, in quanto necessita di jQuery e del suo foglio stile.

Sarà sufficiente poi inserire nella pagina le vostre foto panoramiche all’interno di un elemento contenitore cui dovrà essere assegnata la classe “panorama”.
In pratica:

creando successivamente la funzione:

Le opzioni indicano:

  • repeat : l’immagine sarà ripetuta in modo da avere una rotazione infinita. Di default è impostata a false;
  • direction: indica la direzione di scoriimento che può essere orizzontale o verticale. Di default è impostata a horizontal;
  • animationTime: indica il tempo di attesa per l’animazione. Se impostato a zero, lo spostamento sarà istantaneo. Di default è impostata a 700;
  • easing: indica l’animazione da utilizzare. Questa ozione acetta valori CSS. I valori disponibili da poter assegnare sono “ease”, “linear”, “ease-in”, “ease-out”, “ease-in-out”, and “cubic-bezier(…))”. Di default è impostata a ease-out;
  • overlay: se impostata a false nasconde l’icona di aiuto che appare in overlay. Di default è impostata a true

L’autore afferma che tutti i browser moderni come Chrome, Firefox, e Safari sia in modalità desktop che smartphone sono stati testati.
Il plugin non è ancora stato testato su IE, anche se testandolo personalmente posso affermare che su IE 11 funziona senza alcun problema.

Il pacchetto è disponibile su GitHub ed è possibile visualizzare una demo sul sito dell’autore.

Scritto da jqueryitalia

Sito WEB: http://www.jqueryitalia.org

Lascia un commento

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

Questo sito utilizza i cookies, anche di terze parti: se chiudi questo banner, scorri la pagina o continui con la navigazione, tu ACCONSENTI all'utilizzo dei cookies. MAGGIORI INFORMAZIONI

Questo sito utilizza i cookie per fonire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o clicchi su "Accetta" permetti al loro utilizzo.

Chiudi