Vai al contenuto
jQuery Italia
jQuery Italia

La community italiana di jQuery

  • IMPARA
    • Tutorials jQuery Italia
    • Tutorials dal web
    • Supporto ed Aiuto
  • CONTRIBUISCI
    • Nuovo Articolo
    • Nuovo Tutorial
  • SVILUPPA
    • Snippets
    • Tools
    • Download
    • Plugins
    • Links
  • FORUM
    • Reception
    • Supporto ed Aiuto
    • jQuery News
    • Non solo jQuery
  • NOTIZIE
    • jQuery
    • jQuery UI
    • Projects
  • CONTATTI
  • LOGIN

Foto panoramiche con jQuery Panorama Viewer

Pubblicato il 12 Febbraio 201423 Giugno 2020 Categoria:
  • Plugins

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:

<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.

0 Condivisioni
Share
Tweet
Share
Pin

Login

Accedi con Facebook
Accedi con Google
Accedi con Twitter
  • Registrati
  • Password dimenticata?

SOSTIENI jQuery Italia

Aiuta la Community di jQuery Italia a rimanere in vita per contribuire a diffondere le conoscenze di base ed avanzate di jQuery.

Download in evidenza

  • gmap104.html (3115 download)
  • jquery-1.4.1.min.js (2907 download)
  • tinytips11.html (2792 download)
  • jquery-ui-1.8rc1.zip (2780 download)
  • jqueryformwizard-201.html (2760 download)
  • 1.0.0.zip (2724 download)
  • jquery-1.4.2.min.js (2653 download)
  • calendarPicker.html (2651 download)
  • move-background.html (2621 download)
  • jquerytools120.html (2619 download)

jQuery Links

  • jQuery Howto
  • jQuery Official Site
  • jQuery UI Official Site
  • Learning jQuery
  • Use jQuery

SITO SEGNALATO SU

Sito segnalato da Freeonline.it - La guida alle risorse gratuite Mooseek.com - Web Directory, Download Software, Giochi Online, Video Tecnologici, Siti d'Affari

TAG

aggiornamento (3) ajax (5) Android (5) animazione (49) api (10) BlackBerry (4) calendario (3) canvas (4) css3 (9) form (12) framework (41) gallery (8) google (5) grafici (2) html5 (11) immagini (38) javascript (29) jQuery (160) jQuery UI (15) Linux Day (3) maps (3) menu (6) mobile (10) news (2) open source (4) overlay (3) plugin (93) Plugins (17) presentation cycle (4) projects (11) responsive (5) slider (7) slideshow (18) Smartphones (5) Tablets (4) template (5) testo (2) tooltip (6) tutorial (12) upload (3) utility (18) VELug (3) video (3) widget (3) zoom (3)
jQuery Italia

La community italiana di jQuery

  • Facebook
  • Twitter
  • Linkedin
  • Youtube
Tutti i loghi ed i marchi contenuti e citati in questo sito sono dei rispettivi propietari.
Privacy Policy
Cookies Policy
COPYRIGHT © 2010 - 2021 jQuery Italia
Designed By ZeeTheme