Modify JS

[X1AN36B0]

Hey guys,

I’ve got this set up in which when you click anywhere on the canvas it reveals a new image. It’s pretty straightforward, just one image after the other.

I’d like to change that behavior a little bit. I’d like to have multiple stacks of images and have where you click matter.

It should behave like this: you start with a blank canvas just like now. when you click on the canvas for the first time it will reveal the 1st image of the 1st stack. from that point on if you click on an image you’ll get the next image from that stack while if you click on the canvas you’ll get the first image of next stack. I hope that wasn’t too confusing. :-)

Basically, if you click the canvas you’ll get the stacks and if you click the images you’ll get more images from that stack.

Is that too complicated?
I’m a JS n00b. :-(

Thank you all very much for your help.

http://codepen.io/X1AN36B0/pen/KMMYZX

[X1AN36B0]

Nobody with some guidance? :-(

[X1AN36B0]

Looks like everybody’s gone on vacation… ✈️
My timing sucks! 😢

[Jerba]

You’re not too far off what you’re trying to achieve…

Pretty much all you need to do now is; define some sequences of images, perhaps just using arrays.

Determine how the parameters of the click event impact the resulting sequence (maybe quadrants) and then any subsequent clicks simply get the next index in the array based on the amount of clicks since the sequence started and draw it to the screen.

[X1AN36B0]

Thanks for your advice Jerba. 👍

I kinda see what you mean, but unfortunately I don’t think I have enough JS knowledge to pull it off myself. 😞 Would you be able to help me out?

I forgot to mention this before, but I wouldn’t have only images. Some of the content would be text as well…

[X1AN36B0]

Nobody else?

[Jerba]

People aren’t going to simply write the functionality for you, if you need this desperately then you may need to employ someone to build it for you.

Otherwise, I can help point you in the direction of some useful resources to help you build the basic functionality and improve your Javascript knowledge.

Javascript Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript

Javascript OOP Introduction: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

Event Listeners: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

I hope this helps!

[Author]

Posts