Impress.js - Creating buttons to go to different locations/steps

Question

How do I create buttons on Impress.js slides - buttons which allow me to go to other parts of the presentation.

I'm aware that there is code for next/previous steps but I would like to go to a completely different location/step.

Also, is there a way of overlaying hte button on top of an existing image.

Thanks

Nicole

Answer 1

Option 1: You can use normal html links and anchors.

(Note: In the following html, I've stripped out a lot of stuff to make the principle as clear as possible, so cutting and pasting as is probably won't work, but trust me, the idea does :) )

<div class="step" step="0" data-x="0" data-y="0">
  <h1>This is the first slide</h1>
  <p>Here comes some text.</p>
  <p>Jump to <a href="#LastSlide">Last-Slide</a></p>
</div>

<div class="step" step="1" data-x="1200" data-y="0">
  <h1>This is the second slide</h1>
</div>

<div class="step" step="3" id="LastSlide" data-x="-800" data-y="0" data-z="r2000" data-rotate-y="90">
  <h1>Last Slide</h1>
      <p>How did I get here?</p>
</div>

The key pieces here are the link in the 1st slide (you can replace this with a button, image or whatever you want): <a href="#LastSlide">Last-Slide</a>

and then defining that id in the target slide: <div class="step" step="3" id="LastSlide"... >

Note: After jumping to the target slide, you history is lost, i.e. page-up takes you to whatever slide is logically before the target slide in the presentation. So if you want to go back to where you came from, either place additional links/buttons in the target slide, or use the 'back' button on your browser.

Option 2: Use the impress.js api instead of hyperlinks: impress().goto("LastSlide")