Swiping to change scene

(Tanuj) #1

Im trying to create a slideshow where my users can slide left or right to go to the previous/next image. (Each picture is a different scene)
I’ve tried the onDrag control, but it only allows me to manipulate the timeline. Is there a Javascript i could use to complete this?

Thanks for all your help in advance!


Hi @wadhi,

You could use jQuery with something like

$("your element id").on("swipe", function () {
//code you want to happen here

Instead of "swipe" which reacts to left and right horizontally you could change it to "swipe left" or "swipe right"

Hope this helps!


EDIT** I forgot to mention that you have to include jQuery mobile library.

Here is a Hype file to show you how it’s done.

swipeable_elements.zip (48.6 KB)

(Tanuj) #3

Hi DBear,

First, thanks for your advice, but Im not to good with jQuery, could you just help me out with this?

I’m assuming this needs to run “On Scene Load”?

$("element id").on("swipe left", function () {
hypeDocument.showSceneNamed(sceneName, optionalTransition, optionalDuration)

Thanks so much!

EDIT: Just saw your update, Thanks!

(Greg) #4

Have you tried using the “On Swipe …” functions in the “Scene Inspector”?

(Tanuj) #5

Hi Greg,

I didn’t notice that earlier, Thanks!

Since my entire scene is just the picture, it works fine.

Thanks once again!


That would be much easier! :slight_smile: However it’s good to know that you can call different actions with good’ ol jQuery.


3 posts were split to a new topic: Swipe Conflicts with Scrolling