Foto panoramiche con jQuery Panorama Viewer

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:

<div class="panorama">
 <img src="foto_panoramica.jpg">
 ...
</div>

creando successivamente la funzione:

$(".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.