Using Hype to Create a Slideshow with Random Image Order

Using JavaScript with Hype
3

If you had separate images loading on separate timelines, here’s how you can trigger separate timelines:

var timelineNamesForJumping = ["Timeline A", "Timeline B", "Timeline C"];
var randomTimelineIndex = Math.floor(Math.random() * timelineNamesForJumping.length);
var randomTimelineName = timelineNamesForJumping[randomTimelineIndex];

hypeDocument.playTimelineNamed(randomTimelineName);

Or if you instead had your images on random scenes, here’s how you can jump to random scenes:

var firstSceneIndex = 0;
var lastSceneIndex = hypeDocument.sceneNames().length - 1;
var randomSceneIndex = 0;
var currentSceneIndex = hypeDocument.sceneNames().indexOf(hypeDocument.currentSceneName());

do {
randomSceneIndex = Math.floor(Math.random() * (lastSceneIndex - firstSceneIndex   1)   firstSceneIndex);
} while (randomSceneIndex == currentSceneIndex );

var randomSceneName = hypeDocument.sceneNames()[randomSceneIndex];

hypeDocument.showSceneNamed(randomSceneName);
3 Likes