simple virtual tour

surya nair · 09-28-2012, 11:26 AM

hi.. how are you all..??

i wanted to make a program for a simple virtual tour.. say we have 2 images of rooms.. the program loads the first room's image.. the direction of the image movement is adjusted with the mouse movement.. there is a button on the door of the room.. clicking on that door button leads to the virtual view of the next room.. ie the second room's image is loaded..

i've searched a lot and thus i managed to do the view of a single image.. but i don't know how to do the remaining..

i'm new to js.. please help me..

Philip M · 09-28-2012, 12:05 PM

This forum is not a free coding service. As a general rule, the people helping out in this forum don't write code for others, (especially for what appears to be a commercial application), but try to help with fixing code that doesn't work. You may perhaps get someone to write this script for you, but you'll be far more likely to get help if you have made a substantial effort and written some code yourself. Then someone here will almost certainly help you correct/improve your work.

It is your responsibility to die() if necessary….. - PHP Manual

vwphillips · 09-28-2012, 04:03 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
#tst {
  position:absolute;left:100px;top:100px;width:351px;height:263px;border:solid red 1px;
}

#tst IMG {
  position:absolute;left:0px;top:0px;width:351px;height:263px;
}

/*]]>*/
</style></head>

<body>
image 0 - click the drivers head<br />
image 1 - click the top left<br />
 <div id="tst" >
  <img src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" alt="room" />
 </div>


<script type="text/javascript">
/*<![CDATA[*/
// Pan Image Hot Spot (28-February-2012)
// by Vic Phillips http://www.vicsjavascripts.org.uk

var zxcPanImageHotSpot={

 init:function(o){
  var oop=this,id=o.ID,m=o.Magnify,e=o.PanEdge,ms=o.MaximumScroll,ary=o.ImageArry,obj=document.getElementById(id),img=obj.getElementsByTagName('IMG')[0],w=img.width,h=img.height;
  obj.style.overflow='hidden';
  img.style.left='0px';
  img.style.top='0px';
  img.src=ary[0][0];
  img.removeAttribute('title');
  if (ary[0][2]){
   img.title=ary[0][2];
  }
  o=this['zxc'+id]={
   obj:obj,
   img:img,
   ary:ary,
   cnt:0,
   lgth:ary.lgth-1,
   ex:[e,w-e],
   ey:[e,h-e],
   xy:[0,0],
   x:0,
   y:0,
   ud:1,
   w:w,
   h:h,
   m:m,
   ms:ms
  }
  setInterval(function(){ oop.movexy(o); },50);
  this.addevt(document,'mousemove','move',o);
  this.addevt(img,'mousemove','cursor',o);
  this.addevt(img,'mouseup','swap',o);
  this.addevt(obj,'mouseover','over',o);
  this.addevt(obj,'mouseout','over',o);
 },

 over:function(o,e){
  var ud=e.type=='mouseout'?1:o.m;
  o.img.style.width=o.w*ud+'px';
  o.img.style.height=o.h*ud+'px';
  o.xy=[(o.w-o.w*ud)/2,(o.h-o.h*ud)/2];
  o.img.style.left=o.xy[0]+'px';
  o.img.style.top=o.xy[1]+'px';
  o.ud=ud;
 },

 move:function(o,e){
  var mse=this.mse(e),p=this.pos(o.obj),x=mse[0]-p[0],y=mse[1]-p[1];
  o.x=o.ud>1?(x>0&&x<o.ex[0]?1-x/o.ex[0]:x<o.w&&x>o.ex[1]?(o.w-x-o.ex[0])/o.ex[0]:0)*o.ms:0;
  o.y=o.ud>1?(y>0&&y<o.ey[0]?1-y/o.ey[0]:y<o.h&&y>o.ey[1]?(o.h-y-o.ey[0])/o.ey[0]:0)*o.ms:0;
 },

 movexy:function(o,e){
  var x=parseInt(o.img.style.left),y=parseInt(o.img.style.top),x=Math.max(Math.min(x+o.x,0),o.w-o.img.width),y=Math.max(Math.min(y+o.y,0),o.h-o.img.height);
  o.img.style.left=x+'px';
  o.img.style.top=y+'px';
 },

 swap:function(o,e){
  if (o.img.style.cursor=='pointer'){
   o.cnt=++o.cnt%o.ary.length;
   o.img.src=o.ary[o.cnt][0];
   o.img.style.cursor='default';
   o.img.removeAttribute('title');
   if (o.ary[o.cnt][2]){
    o.img.title=o.ary[o.cnt][2];
   }
  }
 },

 cursor:function(o,e){
  var mse=this.mse(e),x=parseInt(o.img.style.left),y=parseInt(o.img.style.top),p=this.pos(o.obj),xx=mse[0]-p[0],yy=mse[1]-p[1],c=o.ary[o.cnt][1];
  o.img.style.cursor=xx>c[0]*o.ud+x&&xx<c[2]*o.ud+x&&yy>c[1]*o.ud+y&&yy<c[3]*o.ud+y?'pointer':'default';
 },

 mse:function(e){
  if (window.event){
   var docs=[document.body.scrollLeft,document.body.scrollTop];
   if (!document.body.scrollTop){
    docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
   }
   return [e.clientX+docs[0],e.clientY+docs[1]];
  }
  return [e.pageX,e.pageY];
 },

 pos:function(obj){
  var rtn=[0,0];
  while(obj){
   rtn[0]+=obj.offsetLeft;
   rtn[1]+=obj.offsetTop;
   obj=obj.offsetParent;
  }
  return rtn;
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
 }


}

zxcPanImageHotSpot.init({
 ID:'tst',         // the unique ID name of the parent DIV.                (string)
 Magnify:2,        // the magnification.                                   (number)
 PanEdge:50,       // the distance from the edge to scroll.                (number)
 MaximumScroll:5,  // the magnification.                                   (number)
 ImageArry:[       // an array defining the image src, hot spot and title. (array)
  ['http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg',[230,145,250,165],'Winter Palace'],
  ['http://www.vicsjavascripts.org.uk/StdImages/Listening.jpg',[0,0,50,50],'Listening']
 ]
});
/*]]>*/
</script>

</body>

</html>

surya nair · 09-29-2012, 06:31 AM

Quote:

Originally Posted by Philip M

This forum is not a free coding service. As a general rule, the people helping out in this forum don't write code for others, (especially for what appears to be a commercial application), but try to help with fixing code that doesn't work. You may perhaps get someone to write this script for you, but you'll be far more likely to get help if you have made a substantial effort and written some code yourself. Then someone here will almost certainly help you correct/improve your work.

It is your responsibility to die() if necessary….. - PHP Manual

hi philip..

i'm not here simply to copy and paste what i get from the net..
it's true that i've done the partial code from a lot of searches on the web..
but it doesn't mean that i'm simply sitting on my desk and copying whatever i get from the web.. i'm new to js.. so there is a trouble for me.. if i wanted this to be done by someone else, i could have asked this question several months before..

thank you..

surya nair · 09-29-2012, 12:28 PM

thank you phillips for such a script.. but i'm a beginner in js.. i coudn't understand what the script does..
i'm pasting the code i've done.. (ofcourse from the web.. but modified and added for my use)..
------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>virtual tour</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
</head>

<body>

<div id="myDiv" style="height:400px; width:400px;"><img id="myImg" src="image01.jpg"/></div>
<button style="position:absolute; top:420px; left:300px" onclick="myFunction()">next room</button>
<script type="text/javascript">simpleTour("myDiv", "image01.jpg");
var flag = 1;
function simpleTour(divId, imageUrl){
show360(divId, imageUrl , 200, 20 , 1);
}

function show360(divId, imageUrl, imageWidthInPixels, moveIntervalInMS, moveSteps){

document.getElementById( divId ).style.backgroundImage = 'url'+'(' + imageUrl + ')';

document.getElementById( divId ).style.position = "absolute";

document.getElementById( divId ).innerHTML = '<div style="width:20%; height:100%;position:absolute;"'
+ ' onmouseover="show360Direction(\'' + divId + '\',-2);"></div>'
+ '<div style="width:20%; height:100%;position:absolute;left:20%"'
+ ' onmouseover="show360Direction(\'' + divId + '\',-1);"></div>'
+ '<div style="width:40%; height:100%;position:absolute;left:40%;"'
+ ' onmouseover="show360Direction(\'' + divId + '\',0);"></div>'
+ '<div style="width:20%; height:100%;position:absolute;left:60%;"'
+ ' onmouseover="show360Direction(\'' + divId + '\',1);"></div>'
+ '<div style="width:20%; height:100%;position:absolute;right:0px;"'
+ ' onmouseover="show360Direction(\'' + divId + '\',2);"></div>';

show360Direction( divId, 1 );

setTimeout( "move360( '" + divId + "', " + moveSteps + ", 0, "
+ imageWidthInPixels + ", " + moveIntervalInMS +" );", moveIntervalInMS );

}

function show360Direction( divId, iDirection ) {
eval( "show360_" + divId + " = " + iDirection ) ;
}

function move360( divId, iDirectionStep, deltaX, imageWidth, refreshInterval ){

deltaX += eval( "show360_" + divId ) * iDirectionStep;

document.getElementById( divId ).style.backgroundPosition = deltaX + "px 0px";

var evalFunc = "move360( '" + divId + "'"+ ", " + iDirectionStep+ ", " + deltaX+ ", " + imageWidth+ ", " + refreshInterval+ ");";

setTimeout( evalFunc, refreshInterval );

}

function myFunction()
{
if(flag==1){
simpleTour("myDiv", "image02.jpg");
flag=2;
} else if(flag==2){
simpleTour("myDiv", "image01.jpg");
flag=1;
}
}

</script>

</body>
</html>

------------------------------------

now what i want is creating the door as a button, and as the image moves if we click on the door, it leads to the next room.. like you've done.. but i couldn't get which script of yours is used for that..

could you please help me..??
thank you once again for that code..