Controlling Embedded Flipbooks

Question

We want our site to have flip books for our customers to view. So I can generate the flipbook using in5, turning off controls so only have the pull or click the corners to swipe. As the controller in the flipbook export doesn't match our design aesthetic.

I want to be able to have control buttons on the site, near the embedded web content placed flipbook. So. a user can either flip or just click next or back to flip the pages. I don't see a way of accessing that embedded in5 generated html to advance pages.

Any ideas or solution would be huge.

thanks,

Martin

Answer 1

You can remove the back and next arrows when you export either by going to in5 > Export HTML5 with in5... or to in5 > Easy Export Wizard... and clicking the Advanced button, going to the Basic section of the Export HTML5 with in5 dialog and deselecting Show Back/Next Arrows.

If you deselect them when you export, you could add your own custom buttons with Go To Previous Page and a Go To Next Page actions.

You could also keep the setting when you export and customize the Back and Next arrows with CSS:

• How to Customize Back & Next Arrows with InDesign & in5 (video)

Comments

That does make sense for what to do. Though I don't see a way of selecting the iframe or url web content box on the page that has the flipbook I previously generated and added. A new button when clicked or released action of going to a page or next page only allows an inherit zoom or some page actions but only refers to the current document. Not the embedded iframe or flipbook. I don't see a way of choosing it as the target to affect.

---

To navigate content, you would need to add either a hyperlink or a button. The default options for hyperlinks and buttons in InDesign and using the in5 Hyperlinks widget (in5 > Interactive Widgets > Hyperlinks) only include options for navigating the current document. They do not include options for navigating from the main layout to embedded content, so you would need to modify the code as described in this comment:

• https://ajarproductions.com/pages/products/in5/answers/7587/flipbook-export-and-corner-area-to-turn-pages?show=8493#c8493

The two ways to modify your exported in5 code are to either use the Resources section or to manually modify the exported code. To modify the code yourself, you open the file that you want to edit in a text editor such as TextEdit (macOS) or Notepad (Windows) or in an IDE such as Dreamweaver which is available if you have the full Adobe Creative Cloud subscription.

If you're not comfortable manually modifying the code, then you may want to reach out to a web developer.