PDA

Click to See Complete Forum and Search --> : panorama picture

walter
07-25-2003, 02:55 AM
Hi community,
does anybody know where to get a java script to produce a panorama picture like the one here:

THXhttp://www.hotelinnsbruck.com/en/default.htm

and then you've to click panoramapic.

I guess the guy, who made that, got the script from here anyway, but I cnnot find it.


THX
Jick
07-25-2003, 03:19 AM
This thred (http://forums.webdeveloper.com/showthread.php?s=&threadid=10559&highlight=picture) may be of some help to you I hope. :D
Gollum
07-25-2003, 03:38 AM
The panorama on that site wasn't using javascript, it was using a Java applet.

However a very similar effect can be done with javascript using positioning and clipping...


<html>
<head>
<script>
var nPan = 0;
function pan()
{
nPan--;
if ( nPan <= -1152 ) nPan = 0;
var oDiv = document.getElementById('theDiv');
oDiv.style.left = nPan.toString() + 'px';

window.setTimeout("pan()", 5);
}
</script>
</head>
<body onload="pan();">
watch this image<br>
<div width=350 height=270 style="width:350px; height:270px;overflow:hidden;border:solid black 1px;">
<div id=theDiv style="position:relative;"><table border=0 cellspacing=0 cellpadding=0><tr><td><img src="pan.png"></td><td><img src="pan.png"></td></tr></table></div>
</div>
</div>
</body>
</html>


Note: this script assumes you have an image called "pan.png" that is 1172 pixels wide and 270 pixels high. adjusting the script to handle other sizes is left as an exercise for the reader.

Also, I haven't added mouse click and drag - another exercise :D
walter
07-25-2003, 04:37 AM
Dear mjdimick,
Dear Gollum,
thanks for your quick reply.

mjdimick the url was very helpful. This script is very easy to use - thx.

Hallo gollum, your script also looks fantastic!!!!
Would you be so kind and give me also the rest of the script.
Mouse click and drag would be great of course.
Maybe I could do something for you in flash or some grafic work in photoshop or freehand.

THX
Gollum
07-25-2003, 05:04 AM
OK, you sparked my interest...

try this...


<html>
<head>
<script>
var bMouseDown = false;
var nPan = 0;
var nPanInc = 1;
var w;
function pan()
{
if ( bMouseDown ) return;
nPan += nPanInc;
var oDiv2 = document.getElementById('theDiv');
w = oDiv2.offsetWidth / 2;
if ( nPan <= -w ) nPan = 0;
if ( nPan > 0 ) nPan = -w;
var oDiv = document.getElementById('theDiv');
oDiv.style.left = nPan.toString() + 'px';

window.setTimeout("pan();", 20);
}

var nMousePos = 0;
function panMouseDown(e)
{
if ( !e ) e = window.event;
bMouseDown = true;

nMousePos = e.clientX;

//e.cancelBubble = true;
e.returnValue = false;
return false;
}
function panMouseUp(e)
{
if ( !e ) e = window.event;
bMouseDown = false;

window.setTimeout("pan();", 10);
}
function panMouseMove(e)
{
if ( !bMouseDown ) return;
if ( !e ) e = window.event;

var n = e.clientX;
if ( n > nMousePos ) nPanInc = 1; else nPanInc = -1;

nPan += n - nMousePos;
if ( nPan <= -w ) nPan = 0;
if ( nPan > 0 ) nPan = -w;
var oDiv = document.getElementById('theDiv');
oDiv.style.left = nPan.toString() + 'px';

nMousePos = n;

//e.cancelBubble = true;
e.returnValue = false;
return false;
}
</script>
</head>
<body onload="pan();">
watch this image<br>
<div style="width:350px; overflow:hidden;border:solid black 1px;" onmousedown="panMouseDown(event);" onmouseup="panMouseUp(event);" onmousemove="panMouseMove(event);">
<div id=theDiv style="position:relative;"><table border=0 cellspacing=0 cellpadding=0><tr><td><img src="pan.png"></td><td><img src="pan.png"></td></tr></table></div>
</div>
</div>
You can click and drag it now too
</body>
</html>
walter
07-25-2003, 06:04 AM
Hi Gollum,
t h i s i s g r e a t!!!!!!

Thanks a lot.
I already tried it out, you may take a look to:
http://www.ccmotion.at/panorama/

I really appreciate your help.

One last question, is there a possibility that the panorama moves left/right infinite (till the mouse leaves the picture)by just moving the mouse just a bit left or right from the pictures center?? - like in the example from hotel innsbruck?


If yes this would made it be perfect, if not, doesn't matter, I'm very glad you could help me that much.

THX
Gollum
07-25-2003, 07:40 AM
Hi Walter,

The code you have already does something like that, except that it is a "throw mode" direction control, where you drag it in the direction you want it to go and when you let go, it carries on in the same direction.

If you want "steer mode" where the position of the mouse (left or right) tells it where to go then change the panMouse functions like this...


var nMousePos = 0;
function panMouseDown(e)
{
if ( !e ) e = window.event;
bMouseDown = true;

var oDiv2 = document.getElementById('theDiv');
oDiv2.style.cursor = "col-resize";

nMousePos = e.clientX;

//e.cancelBubble = true;
e.returnValue = false;
return false;
}
function panMouseUp(e)
{
if ( !e ) e = window.event;
bMouseDown = false;

var oDiv2 = document.getElementById('theDiv');
oDiv2.style.cursor = "auto";

window.setTimeout("pan();", 10);
}
function panMouseMove(e)
{
if ( !e ) e = window.event;

var n = e.clientX;

if ( !bMouseDown )
{
// 175 is half the width of the div
if ( n < 175 ) nPanInc = -1; else nPanInc = 1;
return;
}

//if ( n > nMousePos ) nPanInc = 1; else if ( n < nMousePos ) nPanInc = -1; else nPanInc = 0;

nPan += n - nMousePos;
if ( nPan <= -w ) nPan = 0;
if ( nPan > 0 ) nPan = -w;
var oDiv = document.getElementById('theDiv');
oDiv.style.left = nPan.toString() + 'px';

nMousePos = n;

//e.cancelBubble = true;
e.returnValue = false;
return false;
}


PS. I also added a bit to change the cursor during drags ;)

This is more fun than real work!!!