Telerik UI for Windows 8 HTML

RadPictureRotatorHubTile has very similar API to the RadMosaicHubTile, even simpler. You just need to define the picturesSource, which should be a JavaScript array of image paths and you are good to go. These could be both paths to local files or links to images hosted at a remote point. Below is a sample definition of a picture rotator hub tile.

RadPictureRotatorHubTile Example Copy imageCopy
var pictureRotatorHubtile = new Telerik.UI.RadPictureRotatorHubTile(document.getElementById("pictureRotatorHubTile"), {
    picturesSource: DefaultData.foodImagePaths
});

The data contained inside DefaultData.foodImagePaths is an array of image paths, as shown below:

Sample Data Copy imageCopy
foodImagePaths: [
    '/images/food/1.jpg',
    '/images/food/2.jpg',
    '/images/food/3.jpg',
    '/images/food/4.jpg',
    '/images/food/5.jpg',
    '/images/food/6.jpg',
    '/images/food/7.jpg',
    '/images/food/8.jpg'
]
Rotator tile

The main difference between RadMosaicHubTile and RadPictureRotatorHubTile is the presentation of the randomly selected images - the former presents multiple images at a time, while the latter rotates images one at a time.

Important

When using RadPictureRotatorHubTile in a WinJS.Binding.Template or any other scenario, in which the control is added to the DOM after it is already initialized, you must specify inline width and height for the host element. This is so because RadPictureRotatorHubTile needs its parent element to have non-zero size when it is initialized.