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?
lightbox .zip (48.2 KB)
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
OK, have a look over here:
The reason your js is not working is because you have the wrong time line name in the
hypeDocument.goToTimeInTimelineNamed();
you have
hypeDocument.goToTimeInTimelineNamed(currentTime - 1.0, 'currentTime');
when you should have
hypeDocument.goToTimeInTimelineNamed(currentTime - 1.0, 'lightbox');
Thanks for the JS fix Mark, how can I make the animation loop back to the start when its reached the end of the timeline?
I have tried this method:Howto: Loop or Repeat an Animation but it doesn’t seem to work
lightbox 0.1.zip (48.5 KB)
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
lightbox 0.2mh.hype 3.zip (48.0 KB)
this looks great but the back button is jumping from start to finish and missing out the middle frame
i probably muffed something in the single js.
switch it to the other two and let me know if they work as expected
I tried separating out the JS into two functions, still no luck im afraid
Huh,
That works fine my end…?
two JS
lightbox 0.2mh.hype 2.zip (48.0 KB)
Just fixed the single. I missed out a var . Also updated above …
single js
lightbox 0.2mh.hype 3.zip (48.0 KB)
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?
lightbox 0.3.zip (254.2 KB)
Well yer but I must admit I don’t understand why you think anything should be happening to the images…
thats your clue by the way…
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
Thats the one… 