[jQuery] Panorama Viewer

[jQuery] Panorama Viewer


First made one using canvas, but ExplorerCanvas didn't like the it.
https://developer.mozilla.org/en/Canvas_tutorial/Basic_animations
http://excanvas.sourceforge.net/
Source Image
http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg
So next I did it using jQuery, here is my result. Tested in FF3,
IE6/7. Would have been easy to do except for the ugly IE css hacks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<script src="jquery-1.2.6.js"></script>
<script>
$(document).ready(function(){
var speed = 30000;
$("#left").click(function () {
runA();
runB();
});
    function runA() {
    $("#blockA").animate({"left": "-=1024px"}, speed, "linear");
    $("#blockA").animate({"left": "+=2044px"}, 1, "linear");
    $("#blockA").animate({"left": "-=1024px"}, speed, "linear",runA);
    }
    function runB() {
    $("#blockB").animate({"left": "-=1024px"}, speed, "linear");
    $("#blockB").animate({"left": "-=1024px"}, speed, "linear");
    $("#blockB").animate({"left": "+=2044px"}, 1, "linear",runB);
    }
});
</script>
<style>
img {
padding: 0;
    margin: 0;
    }
div#t {
    overflow:hidden;
    width:800px;
    height:198px;
    word-wrap: break-word;
}
#blockA, #blockB {
position:absolute;
}
#blockB {
left:1023px;
}
#wrapper {
height: 100%;
width: 800px;
overflow: hidden;
border: 3px solid; /* this is just for debugging, to see if the
browser actually does something sane */
position: relative;
}
</style>
</head>
<body>
<button id="left">«</button>
<div id="wrapper">
<div id="t">
<img id="blockA" src="Capitan_Meadows,_Yosemite_National_Park.jpg" />
<img id="blockB" src="Capitan_Meadows,_Yosemite_National_Park.jpg" />
</div>
</div>
<br />
<br />
<img src="Capitan_Meadows,_Yosemite_National_Park.jpg" />
</body>
</html>