OpenStudio LAB

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

jQuery virtual tour

Take a look at the demonstration.

Introduction

This virtual tour plugin has the particularity to be accessible and can run even if javascript has not been activated] : navigation uses the standard html tags <map> and <area> in accordance with w3c.

No need for Flash, Quicktime ou Java. Your visitors will not have to install any software to experiment your virtual tour.

We are building this extension for a current project : a game around art workcraft for Casa d’Art.

Note : Vertical text is displayed using the jQuery flipv plugin.

Use

- In the <head> section, insert CSS ans javascript calls :

  1. <link rel="stylesheet" type="text/css" href="css/thickbox.css" media="screen" />
  2. <link rel="stylesheet" type="text/css" href="css/jquery.panorama.css" media="screen" />
  3. <script type="text/javascript" src="js/jquery.js"></script>
  4. <script type="text/javascript" src="js/jquery.panorama.js"></script>
  5. <script type="text/javascript">
  6.         $(document).ready(function(){
  7.                 $("img.advancedpanorama").panorama({
  8.                         auto_start: 0,
  9.                         start_position: 0
  10.                         /* add your execution parameters here */
  11.                  });
  12.         });
  13. </script>
  14. <script type="text/javascript" src="js/cvi_text_lib.js"></script>
  15. <script type="text/javascript" src="js/jquery.advanced-panorama.js"></script>
  16. <script type="text/javascript" src="js/jquery.flipv.js"></script>
  17. <script type="text/javascript" src="js/thickbox.js"></script>

see available parameters list on the simple panorama viewer documentation.

- In the <body> section, add the panoramic image call, and the <map> object containing interactive areas coords (only ’rect’ type are supported).

If the <area> is pointing to a picture, you could add the ’thickbox’ class to have a pretty effect using the Thickbox plugin.

  1. <img src="img/sculpteur.jpg" class="advancedpanorama" width="2448" height="375" usemap="testmap" alt="Atelier du sculpteur" />
  2. <map id="testmap" name="testmap">
  3.                 <area shape="rect" coords="1653,72,1839,255" href="index.html" alt="vers la salle de formation" />
  4.                 <area shape="rect" coords="2013,114,2091,210" href="img/statue1.jpg" alt="statues" class="thickbox" />
  5.                 <area shape="rect" coords="1920,276,2070,351" href="img/gouges.jpg" alt="gouges" class="thickbox" />
  6. </map>

And take a look at the example on the zip file.

Download

jquery-virtual-tour.zip

Free software under the GPL licence.

90 Forum posts

  • Virtual tour was a awesome web development till date i have seen...

  • good job, i like your panoramic animation.this is good for people.

  • very nice slide show I think it will be help me this is your very good tutorial

  • great work, but can i try to make the picture running automaticly?

  • Bonjour,
    Merci pour ce plug-in, j’ai toute fois une question: comment puis-je définir une largeur maximale et minimale de la partie visible, afin que ça s’adapte à ma fenêtre?
    En effet, quand je réduit ma fenêtre, et déplace mon curseur sur la droite l’image du panorama continue à s’afficher et c’est vraiment pas esthétique.
    Merci d’avance pour votre aide!

  • Wow! It is a beautiful application - Thanks for sharing.

  • Want to implement the Pano view with some hotspots. I will try your tool and let you know if there is any comments.
    Thanks,
    Seenu.

  • good tool to show virtual tour

  • Looks good, but would be better if hotspots for tour were within image and the icons designed by the user. For example a door knob goes bright as the pointer hovers over indicating it is hot. Or an item goes bright indicating it can be picked up and examined.

  • Wow, this plugin is beautifull!

  • Hello. I’m impressed by your Panoramic JS and want to try it.

  • i like your virtual tour jquery slider

  • me gusto mucho y quiero esta galeria gracias

  • great Tour
    is this virtual tour open source?

  • Dear Sir / Madam
    I’m going to design an "wedding services" site, and I found jQuery Virtual Tour very beneficial for my purpose
    Best Regards

  • How to change height for full page if the image is larger?

  • How to change the panorama height, for example of we want fullscreen for a larger image.

  • This is absolutely fabulous Jquery. Simply Unique and very well implemented.

  • busco una galeria de imagenes para mi pagina web

  • nice slider i want use this in my design

  • o your plugin is so usefull, thank you so much!!!

  • HIi, I need the jquery virtual tour for using the effect on a few projects I am working on. I am willing to share credits.

  • Hello,
    after my second coffee I found the solution for my obvioulsy
    easy question regarding the direction of the image movement on mouse-move / draging ...
    on line 61 replace:


    var delta = parseInt((mouseMoveStart - e.clientX)/30);


    with:


    var delta = -1 * (parseInt((mouseMoveStart - e.clientX)/30));


    With this tweak image movement behaves like most users are used to on touch devices. In fact it just inverts the value given to the variable ’delta’.
    Following my message I originaly wrote:
    Hello, this and the ’jQuery simple panorama viewer’ are very cool.
    But whats bothering me is for todays behavior it ’drags’ in the wrong direction.
    On almost all (newer) touch-devices when I want I see a part of an image (which happens in this scenario here) and for example want to see what is further right than I click on the spot and drag the image to the left. And the other way around if I want to see whats on the left side.
    I suppose that users are used to this behavior as I am. Is it possible to add a feature to invert the movement of the picture to the movement of the mouse?
    Or just simply say, adding a feature to drag the image inside the viewing box?
    Thank you in advance,
    Daniel


    search tags: invert, drag, delta, mousemove


  • Excellent work. Please tell if the images can fetch from the database.
    Regards
    Sandeep

  • I was looking for a jQuery plugin to make virtual tours. This seems very good, I’ll try to see if it fits well with my site. Thank you.

  • this virtual tour will help a lot for my thesis project. thanks

  • Me gusta este post sobre recorridos virtuales una buena alternativa..

  • I need a virtual tour software or just its html coding!!! I want that when I put the mouse on the left of the virtual tour poanel, it move directly to the left and vice versa... Would be a bit like onmouseover function...

  • Bonjour
    je désire voir ce script car il m’intéresse fortement.
    Amicalement,
    Bonne journée.
    Guillaume Chenier

  • his is such a good display tool. So simple but so much potential to show detail.
    I haven’t really tried to implement it yet.
    But a starter question is am i right in seeing no resoson why I cant use colorbox or one of the others to display the still pictures .
    best
    luke

  • This is such a good display tool. So simple but so much potential to show detail.
    I haven’t really tried to implement it yet.
    But a starter question is am i right in seeing no resoson why I cant use colorbox or one of the others to display the still pictures .
    best
    luke

  • Thanks for your work! Much appreciated..

  • Hello
    Discovered on problem when not in 260° view mode. The right limit that corresponds to miniamal value of margin left is not correct:
    this is corrected by taking of viewport_with
    in jquery.panorama.js - mousemove related function see èrpèpsed update below:

    mousemove(function(e)
    if (bMouseMove)
    var delta = parseInt((mouseMoveStart - e.clientX)/30);
    if ((delta>10) || (delta<10)) 
    var newMarginLeft = parseInt(panoramaContainer.css(’marginLeft’)) + (delta);
    if (settings.mode_360) 
    if (newMarginLeft > 0) newMarginLeft = -elemWidth;
    if (newMarginLeft < -elemWidth) newMarginLeft = 0;
     else 
    if (newMarginLeft > 0) newMarginLeft = 0;
    
    // this is were the change has to be performed
    // if (newMarginLeft < -elemWidth) newMarginLeft = -elemWidth;
    
    if (newMarginLeft < -(elemWidth-settings.viewport_width)) 
    newMarginLeft = -(elemWidth-settings.viewport_width);
    
    
    panoramaContainer.css(’marginLeft’, newMarginLeft+’px’);
    
    
  • hi, thanks for the script. This greatly helped me

  • Awesome tool, many thanks! In the loop_180 mode, is there a way to reverse the direction of the movement once it reaches the end? In effect, to have the photo bounce back and forth endlessly?
    Thanks in advance...

  • Is there a way for the picture to be moving up and down, besides left and right?

  • you did wonderful job i want to know how to add zoom effect by using mouse scroll.
    thank you

  • Bonjour,

    Merci pour le module,j’ai adoré.

    J’ai fait une petite modification au niveau du ".mousemove(function(e)" dans jquery.panorama.js:
    var delta = parseInt((e.clientX - mouseMoveStart )/30) au lieu de
    var delta = parseInt(( mouseMoveStart -e.clientX )/30)
    l’image suit ainsi le mouvement du glissé sur un écran tactile.

  • Excelente justo lo que estaba buscando

  • Hi, thank you for great script. Works very good for me.

  • Hello everyone. Im kind of new to this, and was wondering does anyone know how to change the size of the actual div container on screen? On the demo it has its set size but i want to make it bigger on my page.

    Thank you in advance.

    Matt

  • Strange. Your demo works so nicely. When I uploaded your entire folder for testing, the result is a very fast, very jerky show, but nonetheless working. I tried cutting the speeds in half on both panorama scripts, but nothing changes. I’m wondering if others have had the same experience?

  • Bonjour,
    c’est un très joli plug’in... J’aimerais bien l’incorporer sur mon site :
    http://www.photographe-gers.fr
    Etant amateur sur WP, pourriez vous m’aider à l’installer sur mon site ?
    j’ai téléchargé le fichier ZIP.
    Ensuite que faut-il faire ?

    je vous en remercie.
    SJ

  • An important question,
    I develop a large site in ajax and I encountered a problem.
    The problem is the attempt to create eight vr tours in one.
    So do not see the mouse interaction crossing over where it should be ....
    what can i do? help!

  • Obrigado, me ajudou muito!

    Thx, its help so much!

  • Muchas Gracias che!!! Fue de Gran Ayuda!

    Thanks!!! You help me a lot!!!

  • Great script!

    It works well in all browsers aside from IE for me. The scrolling panorama works in IE, but I have area href’s leading to other pages on my website, and this works fine in all other browsers. Has anyone else had trouble with IE and know if there is a work around? I added # marks before my map id and name, because I read that may solve some IE issues somewhere, but had no luck.

    Thanks!

  • Отличный скрипт

  • Thank you for your script :).

    The Opera browser do not see interactive area links (a class="panorama-area area"). Can anything be done to ensure that these areas can be seen in the Opera browser?

    Thank you.

    P.S. I use Opera 10.53 and jQuery 1.4.2.

  • Exactement ce que je cherchais pour mettre en valeur mon panorama réalisé avec Hugin.
    Merci

  • Thank you so much for this, works a treat.

  • Hey, awesome script. Only issue I’m having is adding more controls to the bottom, right beside the left, stop, and right controls. I’m not really sure how to go about doing this, so any help would definitely be appreciated.

    Thanks! :)

  • Hi,

    I just have implemented this fonctionality on the new version. We works currently for a museum and have the same need.
    hope you will enjoy running the virtual tour on a touch screen

    Arnault

  • You might be able to use php to generate pages from a database. I have done it with separate html pages for each room, but I still haven’t found a way to get it working nice with a touch screen. So far I have managed to get the images locked so it doesn’t glitch out any more when someone tries to swipe it left or right (used to start dragging the image off the page).

  • I’m pretty much interested in doing the same thing. However, I’m trying to avoid creating separate HTML pages for each navigation possibility. I have no idea how I’d automatically generate them and I really don’t want to do it manually.

  • HI, Great script. Is it possible to set I up so when a user clicks on the image they can drag it left or right, as well as use the navigation buttons. I am building a virtual tour of our building and we will be using a touch screen interface and I would like it so the users can simply swipe the image left or right. Any help will be appreciated

  • Hello, the 360 degree view only clone the panoramic photo but does not clone the hot links (usemaps) that are attached to the photo. The hotlinks at some scrolled positions of the view are not clickable. Can anyone assist in this matter?

  • Hello, I would like to use the 360 degree view but the clone() function only clones the image but not the usemap (the hot links). It works fine with right arrow but the hot links disappear with the left arrow. Thanks.

  • Je viens de tester votre démo sous Firefox 3.5.9 en désactivant le javascript...

    et ça ne fonctionne plus du tout. Donc, contrairement à ce que vous avancez, le javascript est nécessaire. (puisqu’il utilise jQuery...)

    Mais belle réalisation tout de même. ^^

  • Suggested improvement: add

    onmousedown="return false;" ondrag="return false;"

    into the main pano img - helps stop the "UI" from going screwy under normal use (users have dried dragging the pano img and it "went ugly")

    ie
    <img src="img/sculpteur.jpg" class="advancedpanorama" width="2448" height="375" usemap="testmap" alt="Atelier du sculpteur" />
    becomes
    <img src="img/sculpteur.jpg" class="advancedpanorama" onmousedown="return false;" ondrag="return false;" width="2448" height="375" usemap="testmap" alt="Atelier du sculpteur" />

    If I was more clever I would do this in the Head using jQuery. But I’m not - so I won’t.

    site will go live soon at http://villamiradormarbella.com

    Thanks again

  • You guys are great. I spent a long time looking for an easy to implement VR panorama solution for a website I’ve just coded (and shot the photos for; I like to get away from this desk occasionally)... http://villamirador.qreativbox.com/pano-2-entrance-hall

    Yours is jQuery pano viewer is lightweight, easy to set-up, clearly commented and generally terrific. And it supports hotlinks too. (Note to others see comment below re adapting @name in jquery.advanced-panorama.js for current versions of jQuery.)

    Many thanks for putting this out to GPL. Let me know if you have a "tip jar" as I’d love to send a donation as a thank-you.

    Merci bien!

    View online : http://lazydada.com

  • A-ha! Great spot re the @attribitue - took me a little while to figure out there was a problem with jQuery 1.4.x

    View online : http://lazydada.com

  • Wow this is great..!

    this is a great way in replace to Flash, Quicktime and Java..
    Just thinking if there is a way where i can used this one in a popup/lightbox div where the image is place and do the virtual tour? Coz i tried it, but im getting some errors in the jquery.js "Invalid Argument" in line 24 col 1337. I think it has something to do with the lightbox where i place this one. Any help?

    thanks a lot.

  • Is it possible to control the speed of the tour with the mouse drag or mouse move event such as the tour can spin fast or slow depending on the speed of the mouse? Any response is greatly appreciated. thanks..

  • Hello guys,

    This application is awesome. I like it so much.Could someone help me with change of navigation arrows?how can I change them to another style? I would like to get something similar like here
    http://www.siteweventos.com/site/index.php?menu=weventos#

    thank you!

  • THANK YOU!. this is simply awesome application. I like it.
    could somebody explain me how could I change and possibly move icons (arrows) for movement in virtual tour?I already adapted it to work on mouseover not on click, but I would like to get it to similar status as here http://www.siteweventos.com/site/index.php?menu=weventos#

    Thank you very much guys!

  • Is this application free? can I use this on my website and change it a bit?

  • Hi there!

    First of all, sorry for my bad english spelling :$ I’m from Brasil. Second of all, if you want to use this script with a mouseover solution take a look at the jquery.panorama.js that come within this example.

    There, you’ll find some function binds like, for example, panoramaViewport.bind(’click’, function() ... ); All you need to do is change all of the "click" by "mouseover" where you’d like to have the action changed, and it should work just fine ;) you may take a look for the example here www.siteweventos.com/site ;)

    []’s
    Have a good week ;)

    View online : http://www.vsdani.com/

  • How to move left or right just on hover, and to stop on mouse out

  • Wow, this is great :)

    Can you please help me how to make motion instead of clicking on << and >> just to hover, and when you mouse-out to stop moving.. ?

    cheers

  • this tour is very impressive..

    View online : Teknikim

  • It’s working really good on http://www.abruzzen-online.de/de/360-panoramen

    Great work and thank you very much!

    View online : http://www.abruzzen-online.de/de/36...

  • Great application! Just wondering if there was any way to use the jQuery hover effect to control the scrolling motion instead of the click event. I’m racking my brain trying to figure it out.

  • Great work!

    Just a small tip, to make the advaced panorama work for newer jQuery versions, you just have to replace

    [@name=

    by

    [name=

    as @attribute is not working anymore in jQuery version 1.3

    Thanks again for the great work

    View online : http://blog.gr80.net

  • Bonjour

    ça fait un jour que j’essai de faire tourner virtual tour avec la dernière version de jquery, la version 1.3.2 .
    J’ai remarquer qu’en repassant en 1.2.3 comme dans l’exemple celà fonctionne or j’utilise d’autre plugin et je ne souhaite pas utiliser plusieurs version sur mon site.
    1. pour rendre un lien (map) cliquable j’ai rajouté # dans usemap.
    2. malheureusement le cadre pour le mettre en valeur et flipv n’apparaissent pas.

    avez-vous une solution ou un exemple qui fonctionne avec cette dernière version de jquery?

    merci beaucoup

    PS: sinon, y’a rien a dire, ce plugin est excellent, bravo!

  • J’ai du finalement pour l’applet thickbox, insérer le fichier.css dans le css de ma page, du coup cela fonctionne. Il ne me reste plus qu’à trouver comment renforcer la visibilité des boutons de navigation (problème d’opacité?).

    View online : http://www.grainedenature.net

  • Bonjour, je n’arrive toujours pas à faire fonctionner l’applet "thickbox" et les images pour la navigation sont presque invisibles, y a t-il des réglages particuliers à mettre en place?

    View online : http://www.grainedenature.net

  • Ravi de découvrir ce viewer panoramique qui plus est pourrait m’intéresser fortement pour créer des visites virtuelles de projets de décoration intérieure et les mettre en place sur mon blog. Reste à comprendre son fonctionnement... merci pour cette visite.

    View online : http://www.grainedenature.net

  • This is really great.

  • Bonjoour!
    Sorry to write in english but my french is not that good... :-)

    What a great script! Many Thanks!

    Just one question:
    Would it be possible to publish a toutorial about shooting the pictures used for the virtual tour or how to prepare pictures for that such as the equipment! Maybe knows a existing toutorial about that... and could publish the links?

    I think it would be of help for all users using your script!

    Very best regards from Switzerland

    SWISHI

  • Salut,

    Pour les objets regarde sur le lien suivant : http://www.thoro.de/portfolio/versc..., ça a l’air génial.

    C’est une technologie également basée sur javascript, qui permet donc d’éviter les technologies propriétaires.

  • Bonjour, je cherche un moyen de faire des panorama-objets (ou trouve de l’info avec la dénomination "quicktime VR objets", un exemple est visible sur ce site qui présente de superbes objets archéologiques interactif en 3D). Il me semble que la technologie doit être bien proche de ce qui est proposé dans cet article !

    Sinon, vraiment très bien cette visite virtuelle et surtout une vraie alternative aux plug-ins et technologie annexes !

  • Superbe cette visite virtuelle, merci, merci merci encore jquery et merci à toi.

    C’est bien simple, maintenant, quand je cherche à faire quelque chose de clean et sympa, je cherche d’abord autour de jquery.

    eebee

  • Superbe visite virtuelle, évitant l’emploi de QT ou Flash. Les messages de remerciements sont rares, moi meme je ne remercie pas assez, alors j’essaie de me rattraper avec ce message. Merci beaucoup!!

    Zoowy

  • Génial ce script merci .
    Un truc sympa ca serais de faire défiler le pano en mettant le curseur de la souris sur le coté de l’image mais je sais pas si c’est possible en javascript .

  • Sorprendete, Felicitaciones!!!!!!!!!

    View online : Oscar Antolinez

  • Salut azertu !

    les spipiens viennent me rendre visite ;)

    je viens de faire une nouvelle version : le scroll s’arrête si on clique sur l’image.

    a+

  • Bonjour

    Le script tourne parfaitement sur nos navigateurs :)

    Deux suggestions suite à son utilisation :

    • pouvoir stopper le panorama lorsqu’on click sur une zone de la map, cela fait un peu bizarre lorsque l’image continue à rouler dessous l’image ouverte par thickbox.
    • pouvoir accélerer/ralentir la vitesse de rotation lorsqu’on clique sur les fleches.

    En tout cas on adore :)

pre-moderation

Warning, your message will only be displayed after it has been checked and approved.

Who are you?
Enter your comment here
  • This form accepts SPIP shortcuts [->urls] {{bold}} {italics} <quotes> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.