14
FEV

jQuery Panorama Viewer: Vos panoramas embed sur vos pages web

Publié le 14/02/14 à 07h35 par DJo

jQuery Panorama Viewer est un plugin jQuery permettant d'intégrer des images panoramiques interactives dans vos pages web.

jQuery Panorama Viewer est un plugin jQuery permettant d'intégrer des images panoramiques interactives dans vos pages web.

Vous êtes passionné de photo et réalisez des photos panoramiques ? Vous voulez présenter votre agence, vos bureaux à 360° ?

Voici un plugin jQuery simple et efficace pour mettre en place des panoramas scrollables en drag and drop.

Le principe est très simple, une image est intégrée sur la largeur de votre site, et l'utilisateur à la possibilité de se déplacer vers la gauche ou droite sur cette dernière. Arrivée en bout d'image, on reboucle sur l'autre partie de manière transparente.

Quand la souris est hors focus de l'image, une icône expliquant à l'utilisateur qu'il peut drag and drop s'affiche.

Voici comment le mettre en place:

  $(".panorama").panorama_viewer({
    repeat: false,              // The image will repeat when the user scroll reach the bounding box. The default value is false.
    direction: "horizontal",    // Let you define the direction of the scroll. Acceptable values are "horizontal" and "vertical". The default value is horizontal
    animationTime: 700,         // This allows you to set the easing time when the image is being dragged. Set this to 0 to make it instant. The default value is 700.
    easing: "ease-out",         // You can define the easing options here. This option accepts CSS easing options. Available options are "ease", "linear", "ease-in", "ease-out", "ease-in-out", and "cubic-bezier(...))". The default value is "ease-out".
    overlay: true               // Toggle this to false to hide the initial instruction overlay
  });

Côté compatibilité navigateurs, on est bon à partir d'Internet Explorer 9 et compatible smartphones / tablettes.

 

Site Officiel

Personne n'a baraguiné de chtite phrase pour le moment !


Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web