Im having trouble getting this Lightbox project to work, the lightbox created in the attached hype project should work on its own timeline and loop though, back to the start once finished but im unable to make the forwards/backwards controls work, any ideas?
thanks Djon, as suggested by the JS, each time the forward or backward arrow is clicked the timeline should move 1 second and hop directly to that point. the buttons you made seem to create a delay, and then play image continuously without pause
here’s an example, but im trying to create one without the slide animation
I would remove all the Time line Actions. As setup you do not need them.
A note on goToTimeInTimelineNamed() it does not continue a timeline just goes to that point…
In this example I have set the backwards and forwards buttons to a single JS function which uses class names of each button to determine which button called it.
I have also kept the original JS functions but with similar code I use but as individual calls from each button.
1, so it makes it more clear and 2, you may prefer separate JS for each button.
The JS code uses the timelines duration to know when to loop. I assumed you want to loop in both directions.
(Note to anyone reading this. It speeds things up for use to show examples that are more inline with the behaviour you want if you itemise the full and relevant behaviour instead of the single part you are after at this stage. Otherwise we start assuming things… )
Also you had the button names switched around. I fixed that
var isForwards = element.classList.contains('forwards')//-- true/ false
console.log(isForwards);
var currentTime = hypeDocument.currentTimeInTimelineNamed('lightbox');
var timeDuration = hypeDocument.durationForTimelineNamed('lightbox')
var endTime = timeDuration ///-- time we will initially go to if at end of loop // if isForwards
var newTime = currentTime + 1.0 ///-- time we will initially go to // if isForwards
var loopTimejump = 0 ///-- time we will loop to. // if isForwards
if (!isForwards){
//-- is false
endTime = 0
newTime = currentTime - 1.0
loopTimejump = timeDuration
}
if (currentTime != endTime ){
hypeDocument.goToTimeInTimelineNamed(newTime, 'lightbox');
return //-- finish here
}
hypeDocument.goToTimeInTimelineNamed(loopTimejump, 'lightbox') // finish here
Thanks for the solution, I have added images to the slideshow and for some reason they don’t seem to work as the coloured rectangles do, do you know why this is happening?
I assumed that whatever happens on the hype stage would also happen within a browser, I get it - there was no actual animation frames in my last example for the bitmap images