how to make a 180º panorama?

[alapimba]

Hello, anyone can point me in the right direction on how to make a 180º panorama?

 

I have a 180º image of my office, i want to put it on a size with all the width of the open browser (100%) and the user to be able to scroll from the left to the right of the image with rollover.

 

Anyone can help? I have searched a lot but nothing of what i found does what i need.

 

Thanks

[requinix]

Option: double the image (two copies side by side*) and use it as a backgroundImage. Adjust the backgroundPosition according to whatever events. The doubling is for scrolling too far left or right: if that happens then wrap the X position around (if Xwidth then X=X-width).

 

Another option: a DIV with two* IMGs. position:absolute and adjust the left: for sliding.

 

 

Are you looking for a complete solution or an explanation on how to do it yourself?

 

 

* So you have a portion of the image where the left and right "edges" are seamed together. Say your image was "ABCD" and the window showed two letters at once: if someone scrolled all the way left you'd have just "[ A]BCD" (a gap). Doubled, they'd see "ABC[DA]BCD" (gapless). If ever they try to see an edge, you recalculate the X offset to show the middle instead.

[alapimba]

A comporte solution would be better but i'll try to do something with the tips you gave

[requinix]

Well, define "scroll".

[alapimba]

this is what i did so far

 

http://endbox.com/clientes/teste_360/

 

But i wanted instead of drag the image to if i'm with the mouse on the right side it goes to the right, if it's on the left the image moves to the left..

 

[requinix]

Use an onmousemove on the image/its container: if the mouse is less than some distance from the edge then make sure you have an interval running that scrolls in the right direction (starting one if you don't), and if the mouse is more than the distance then make sure any running interval has stopped.

 

Essentially,

var direction = 0;
var interval = null;

function moveimage() {
if (direction 		// move the image left
} else {
	// move the image right
}
}

// image.onmousemove = function() {
// if the mouse is 		direction = -1;
	if (interval == null) interval = window.setInterval(moveimage, milliseconds per iteration);
// } else if the mouse is > some distance (ie, near the right edge) {
	direction = 1;
	if (interval == null) interval = window.setInterval(moveimage, milliseconds per iteration);
// } else {
	window.clearInterval(interval);
	interval = null;
// }
// }