I'm trying to using this code and put my own image sequence instead, and somehow it just doesn't work.
<head>
<title>3D Rotation Viewer | JavaScript Examples | UIZE JavaScript Framework</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="keywords" content="animation drag-and-drop ipad touch Uize.Widget.Drag Uize.Widget.Fade.xFactory"/>
<meta name="description" content="Easily create a 3D rotation viewer in UIZE that lets users rotate the view of an object a full 360 degrees using a mouse, or finger on the Apple iPad."/>
<link rel="stylesheet" href="css/page.css"/>
<link rel="stylesheet" href="css/page.example.css"/>
<style type="text/css">
.rotationViewer {
position:relative;
width:701px;
height:360px;
border-style:solid;
border-width:1px;
margin:auto;
margin-bottom:10px;
cursor:pointer;
}
.rotationViewer img {
position:absolute;
visibility:hidden;
left:0;
top:0;
width:100%;
height:100%;
}
</style>
</head>
<body>
<script type="text/javascript" src="js/Uize.js"></script>
<div id="page_rotationViewer" class="rotationViewer insetBorderColor"></div>
<script type="text/javascript">
Uize.module ({
required:[
'Uize.Widget.Drag',
'Uize.Fade.xFactory',
'Uize.Curve.Rubber',
'Uize.Curve.Mod',
'Uize.Widget.CollectionItem.Zooming',
'Uize.Widget.MagView'
],
builder:function () {
/*** create the example page widget ***/
/*** configuration variables ***/
var
totalFrames = 27,
frameUrlTemplate ='images/pictures/MyImage_[#frame].jpg';
/*** state variables ***/
var
rotation = 0,
lastFrameNo = -1,
dragStartRotation
;
/*** create the Uize.Widget.Drag instance ***/
var rotationViewer = page.addChild (
'rotationViewer',
Uize.Widget.Drag,
{
cancelFade:{duration:5000,curve:Uize.Curve.Rubber.easeOutBounce ()},
releaseTravel:function (speed) {
var
deceleration = 5000, // measured in pixels/s/s
duration = speed / deceleration
;
return {
duration:duration,
distance:Math.round (speed * duration / 2),
curve:function (_value) {return 1 - (_value = 1 - _value) * _value}
};
},
html:function (input) {
var
htmlChunks = [],
frameNodeIdPrefix = input.idPrefix + '-frame'
;
for (var frameNo = 0; ++frameNo <= totalFrames;) {
htmlChunks.push (
'<img' +
' id="' + frameNodeIdPrefix + frameNo + '" class="jabawa"' +
' src="' + Uize.substituteInto (frameUrlTemplate,{frame: frameNo}) +'"' +'/>'
);
}
return htmlChunks.join ('');
},
built:false
}
);
/*** wire up the drag widget with events for updating rotation degree ***/
function updateRotation (newRotation) {
rotation = ((newRotation % 360) + 360) % 360;
var frameNo = 1 + Math.round (rotation / 360 * (totalFrames - 1));
if (frameNo != lastFrameNo) {
rotationViewer.showNode ('frame'+ lastFrameNo,false);
rotationViewer.showNode ('frame'+ (lastFrameNo = frameNo));
}
}
rotationViewer.wire ({
'Drag Start':function () {dragStartRotation = rotation;},
'Drag Update':function (e) {updateRotation (dragStartRotation - e.source.eventDeltaPos [0] / 2.5)}
});
/*** function for animating spin ***/
function spin (degrees,duration,curve) {
Uize.Fade.fade (updateRotation,rotation,rotation + degrees,duration,{quantization:1,curve:curve});
}
//widgetClass:'Uize.Widget.HoverFader',
//nodes:{root:'menu1',className:/\bmenuLink\b/}
/*** initialization ***/
Uize.Node.wire (window,'load',function () {spin (360,2700,Uize.Curve.easeInOutPow (4))});
//Uize.Node.wire ('rotationViewer','click',function () {spin (360,2700,Uize.Curve.easeInOutPow (4))});
/*** wire up the page widget ***/
page.wireUi ();
page.wireNode (Uize.Node.find ({tagName:'img',className:/\bjabawa\b/}), 'click',function (){alert("hey there");});
}
});
/*CONTINUOUS ROTATION
Uize.Node.wire (
window,
'load',
function () {
setInterval(
function() { spin (360,2700,Uize.Curve.linear (4)) },
2700
)
});*/
</script>
</body>
</html>