adding onclick event to image within widget

  • 1
  • Question
  • Updated 2 years ago
  • Answered
  • (Edited)
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members.

Bit of a beginner with coding, I have created a multi page presentation, I just need to call a function ("showPage('1');") when an image is clicked. I know you can do this simply by adding the onclick parameter on a div with an image background, but i need a timeline of images that go to different pages so the image widget is perfect.

I have used the console to bring up the IDs for each image in the widget. I just need to know how to put the onclick function onto them.

If you need any more info let me know.

Cheers
Jim
Photo of Jim Johnston

Jim Johnston

  • 422 Points 250 badge 2x thumb

Posted 2 years ago

  • 1
Photo of Jim Johnston

Jim Johnston

  • 422 Points 250 badge 2x thumb
I tried>>

 $(document).getElementById("sc0_pre0_image_0w").onclick = showPage("1");

But no luck.. I have the showPage listening to onclick events on buttons but cant figure how to use it with the image widget.
Photo of Robb

Robb, Official Rep

  • 76,676 Points 50k badge 2x thumb
Hi Jim,

Just to confirm, have you read through all our documentation regarding multi page Presentations here?: https://help.risevision.com/developer/presentations/multi-page/multi-page-presentations
Photo of Jim Johnston

Jim Johnston

  • 422 Points 250 badge 2x thumb
Hi Robb, yes this is what I've followed to create the project i'm working on. I referred to the image click event tutorial here to try get images to trigger the showPage function. In the first half it explains you can trigger events using an image item. I assumed it means the rise vision image widget you find in the playlist panel?

Photo of Robb

Robb, Official Rep

  • 76,676 Points 50k badge 2x thumb
Jim,

The Image Item is only available in our Classic Editor (http://rva.risevision.com), and has been replaced by the Image Widget. I'm confirming with our Dev team now if there is an equal operation to that tutorial for the Image Widget, but since the Widget won't respond to clicks on it as it's not interactive, you'll likely have to create a custom version of the Image Widget that handles the click event.

The Image Widget source code can be found here.

Thanks!
Photo of Robb

Robb, Official Rep

  • 76,676 Points 50k badge 2x thumb
Jim,

The Developer's just confirmed my suspicion; That tutorial you linked to will not work with the Image Widget as it is currently does not listen for that onClick event.

However since the Widget is open source, you can edit it to your heart's content, and get that interactivity working how you need!

Thanks! 
Photo of Jim Johnston

Jim Johnston

  • 422 Points 250 badge 2x thumb
Thanks Rob, I'll take a look, but it may be beyond my coding scope haha.
Maybe there is a simple code I could paste in which will enable interactivity on the widgets? I'll take a look at some of the community widgets to see if there are any alternatives.
If not then I may have to make a hack slideshow where I time changes of the z-index of a series of divisions. Pretty messy but maybe it'll work!
Photo of Robb

Robb, Official Rep

  • 76,676 Points 50k badge 2x thumb
Be sure to let us know how you make out Jim, and if we can be of any assistance!