Sample 10 - Controlling the Animation via JavaScript

This example shows how you can enhance the user interface experience by controlling the animation externally via JavaScript.
Control and appearance of the Carousel are effected entirely via the XML file 3dcarouselv2.xml (Help File).







The following function calls are available:

InvokeImageClick(index)
Executes a mouse click on a Carousel image.
index: the index of the image on which the click should be effected.
Sample: animation.InvokeImageClick(0);

InvokeDetailPageClose()
Closes the DetailPage and returns to the 3D Carousel.
Sample: animation.InvokeDetailPageClose();

InvokeLeftButtonClick
Clicks on the left navigation button.
Sample: animation.InvokeLeftButtonClick();
Set NavigationType="auto" to use this function call!

InvokeRightButtonStop()
Clicks on the right navigation button.
Sample: animation.InvokeRightButtonClick();
Set NavigationType="auto" to use this function call!

InvokeAnimationStop()
Stops rotation of the 3D Carousel.
Sample: animation.InvokeAnimationStop();
Set NavigationType="auto" to use this function call!

InvokeAnimationStart()
Starts rotation of the 3D Carousel.
Sample: animation.InvokeAnimationStart();
Set NavigationType="auto" to use this function call!


Settings in ClickMe.html:
var element = document.getElementById("carouselv2");
element.InvokeImageClick(0);

var element = document.getElementById("carouselv2");
element.InvokeDetailPageClose();

...