OpenStudio est éditeur du logiciel libre Thelia

Thelia est un outil de création de sites e-commerce et de gestion de contenu en ligne basé sur Symfony 2. Vous trouverez dans cette section un aperçu de nos autres contributions libres et variées : développements logiciels, thèmes graphiques, tutoriels...

Un viewer de panoramas simple en jQuery

Nous avions réalisé il y a quelques temps un plugin permettant l’ajout de panoramas dans SPIP.

L’intérêt de cette nouvelle version, est qu’elle n’est plus uniquement destinée aux utilisteurs du CMS SPIP et surtout qu’elle est basée sur la librairie accessible jQuery, qui permet une intégration plus facile.

- Démonstration

Si vous souhaitez aller plus loin et assembler vos vues panoramiques pour former une visite virtuelles, découvrez notre plugin jQuery virtual tour.

Installation

- dans la section <head> de votre page, ajoutez :

<link rel="stylesheet" type="text/css" href="css/jquery.panorama.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.panorama.js"></script>

- puis dans le corps de votre page, ajoutez simplement la classe ’panorama’ sur une image panoramique, exemple :

<img src="img/atelier.jpg" class="panorama" width="2642" height="375" />

MAJ 06/2009 : Si la taille de l’image n’est pas précisée dans la balise img, c’est la taille réelle de l’image qui est utilisée. Merci à Frédéric Martini pour cette amélioration et pour la gestion du paramètre loop_180.

Vous pouvez personnaliser le style aux couleurs de votre site en modifiant jquery.panorama.css

Options

Il est possible de passer au plugin des paramètres, il faut alors donner à vos images une autre classe que ’panorama’, puis appelez le plugin explicitement en lui passant les paramètres, exemple :

<script type="text/javascript">
$(document).ready(function(){
        $("img.mypanorama").panorama({
                 viewport_width: 500,
                 speed: 30000,
                 direction: 'right',
                 control_display: 'yes'
         });
});
</script>

liste des paramètres :

- viewport_width : pour préciser la largeur de la fenêtre de visualisation (par défaut : 600)

- speed : permet de contrôler la vitesse de rotation. (Par défaut : 20000)

- direction : sens de rotation, ’left’ ou ’right’ (par défaut : ’left’)

- control_display : afficher en permanence le panneau de contrôle, valeurs possible : ’auto’ ou ’yes’ (par défaut : ’auto’)

- start_position : position au démarrage du panorama. Par exemple 1000 corrspond à x=1000px (par défaut : 0)

- auto_start : démarrage automatique du défilement : true ou false (défaut : true)

- mode_360 : boucler sur l’image ? true ou false (défaut : true)

- MAJ 06/2009 : Un nouveau paramètre loop_180 (prend les valeurs true ou false) permet de boucler sur des gauche/droite lorsque mode_360=false.

Téléchargement

jquery.panorama.zip

Ce logiciel est libre sous licence GNU GPL.

23 Messages

  • Hi I love your panoramic system, but can I make it resize for iPad & iPhone ?
    Regards
    Grant

  • Bonjour,
    J’ai expérimenté le viewer 360 et vous remercie pour cette option de viewer que je recherchai depuis très longtemps, j’aimerai savoir s’il serait possible de paramétrer plusieurs vitesses de défilement pour un grand pano à la manière de
    http://www.alpen-panoramen.de/viewer.php?pid=21429
    Merci d’avance pour votre réponse
    Michel Puissant

  • hi. thanks for plugin.
    is there a param "end_position" for blockin the scroll at end of image (i use an image 180° and i want to stop the scroll at end) ?
    anyone can help me ?
    thank a lot

  • Bonjour,
    Est-ce possible de modifier les options par exemple speed à l’aide d’un Slider (Jquery UI) sans que le plugin recrée un nouveau panorama ?
    Exemple :
    $(’.pano’).panorama(mes options de base) ;
    $(’.slider).slider(change : function(ev, ui) $(’.pano’.panoramaspeed : ui.value) ;) ;
    Merci

  • Very nice, very easy to implement. Is it possible to make it full screen ?

  • J’ai trouvé "loop_180" ici :
    http://piwigo.org/dev/browser/extensions/Panoramas/js/jquery.panorama.js?rev=6527
    C’est une modification par Frédéric Martini.
    Franz

  • Bonjour,

    Ce Plugin est carrément sympa, merci bien !!!

    Par contre je n’arrive pas a utiliser le loop_180, a dire vrais je ne trouve aucune trace de cette fonction dans le .js, pouvez vous m’aider svp .

    Merci d’avance
    cordialement

  • Hi,

    I just wanted to let you know, that we added your simple panorama viewer in our webpage at http://www.uvitalonghouse.com/longhouse-panorama.php

    Thanks a lot and greetings from Costa Rica !

  • HELLO
    BEFORE ANYTHING THANKS A LOT FOR YOUR USEFUL SCRIPTS
    in the "jQuery simple panorama viewer", how can i put a small picture at the center of panorama as logo ?(i want to add a code in the "jquery.panorama.js")

  • Je souhaite publier des panoramas non 360 sur mon site. J’ai donc mis le parametre mode_360 à false. Je remarque cependant que l’image stoppe pendant un moment peu avant la fin puis repart. Ca me le fait quelque soit le panorama utilisé.
    Par ailleur une fois arrivé à la fin, l’image ne repart pas vers la gauche. J’ai regardé le code du jquery.panorama.js du 25/06/2010, je ne vois pas le parametre loop_180 dont vous parlez. Pouvez vous m’aider ? Cordialement

  • Buenos días, desde Colombia

    Excelente aporte, muy fácil de implementar.

    Muchas Gracias..

  • Pour ce qui voudrais vraiment télécharger le zip, car en date du 25 juin 2010 à 18h24 le lien de téléchargement ne fonctionne pas :)

    Voici le bon lien
    http://www.openstudio.fr/download/jquery.panorama.zip

    squirrel :)

  • Pour info votre plugin est intégrer dans le plugin Panoramas de la galerie Piwigo.

    http://fr.piwigo.org/ext/extension_view.php?eid=207

    Merci

  • Hi

    Great plugin.

    I was wondering if you have extended this with jquery mousewheel plugin as I have tried and cant quite get it to work

    thanks.

  • Bonjour formidable plugin. J’aimerais savoir une chose :

    Est-il possible d’utiliser ce plugin pour un panorama "vertical" ? Donc même principe mais de bas en haut et qui ne va pas jusqu’à 360° (ça s’arrete à 180 environ).

    Merci !

  • merci pour ce plugin très esthétique et facile à utiliser. Une question : je n’arrive pas à regler la vitesse de défilement , comment faire ?

    merci d’avance.

    le co-xebmaster du site du Lycée

    Voir en ligne : site du lycee A Camus de Rillieux La Pape

  • Juste une question : je voudrais simplement enrichir l’interface de deux choses :

    - lancer le changement de defilement au survol des flèches plutôt que sur le click
    - étendre la zone pour lancer la rotation sur les bords gauche et droite de l’image

    mais je ne sais pas trop où intervenir dans le code

    pourriez vous m’aider ?

    mon mail : soulou@free.fr

  • Bonjour
    En premier lieu, merci et bravo pour ce viewer exeptionnel.
    Je l’ai testé avec succès étant pourtant débutant en CSS & cie.
    J’ai cependant une petit question concernant les "options"
    Où placer ce code afin de ne pas présenter les photos en 360° mais en les stoppant aux extrémités ?
    Merci par avance
    Cordialement

  • Ce petit plugin pour jQuery vous propose d’afficher sous la forme d’un panorama interactif, toutes les images de votre page qui contiennent la classe ’panorama’

  • Bonjour, j’ai trouvé ce plugin très intéressant et le teste actuellement sur mon blog. Je rencontre encore quelques difficultés : le panel de commandes " boutons de commande quasi invisibles sur le background transparent", je ne sais où et comment modifier la hauteur du titre vertical, l’applet thickbox ne s’affiche à l’appel d’une url. Pourriez-vous me guider ? Merci.

  • Très sympa ce Plugin ! Facile à utiliser si on a un minimum de connaissance en HTML/CSS et JavaScript. De plus il est sous licence GNU GPL ce qui est rare dans le domaine d’une visite virtuel. Je recommande aussi SpinControl:VR et PanoSalado qui utilise Flash/CS3. Ces outils sont gratuits et disposent d’un support documentaire très compréhensible ainsi que d’une aide en ligne.

    Bon encouragement et encore merci pour ce Plugin

    Voir en ligne : http://panosalado.com/

  • Bonjour,

    Merci pour ce Plugin qui est très sympathique !
    Je ne l’ai pas beaucoup utilisé mais je l’ai adopté après le peu que j’en ai vu.
    Plus besoin de se casser la tête pour des visites panoramiques.

    Bonne continuation.

modération a priori

Attention, votre message n'apparaîtra qu'après avoir été relu et approuvé.

Qui êtes-vous ?
Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.