jQuery Panorama Viewer è un piccolo plugin jQuery che consente di incorporare foto panoramiche nel proprio sito web.
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:
| 1 2 3 4 | <div class="panorama"> <img src="foto_panoramica.jpg"> ... </div> |
creando successivamente la funzione:
| 1 2 3 4 5 6 7 | $(".panorama").panorama_viewer({ repeat: false, direction: "horizontal", animationTime: 700, easing: "ease-out", overlay: true }); |
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.