Scrolling iBooks HTML Widget Boilerplate
This is a basic project for a Scrolling HTML Widget that can be embedded in an iBook with iBooks Author.
Clone this git repo as a directory with a
.wdgt file into iBooks Author. And that's it!
Notice, however, that when you drag the
.wdgt into iBooks Author, you just get an image that says "Preview." iBooks doesn't load anything from your HTML widget other than
Default.png until the user taps it.
If you just delete
Default.png, iBooks Author will generate a preview automatically, but it probably won't have the proportions that you want, and some of the content may overflow. I recommend replacing
Default.png with a nice screenshot of the widget, and cropped and scaled to the right dimensions. You should probably make this the last step in your book production process, and do without
Default.png until then.
Info.plist to set the appropriate width and height for your widget. When opened on the iPad, the widget will be scaled to fit the screen but will maintain the correct width/height proportion. Also note that 1px in your markup refers to 1px according to the
Info.plist dimensions, not the actual pixels on the device screen.
Currently, HTML widgets can only be viewed in landscape orientation, so you'll probably want a size of 1024x768 adjusted slightly for the title, caption, and background margin that you can customize from the Widget inspector in iBooks Author like so:
License / Credits
- Combining Various Elements - Ed Wilde
- JQuery Custom Content Scroller - Malihu
- Original iBooks HTML Widget Boilerplate - Trevor Burnham
Based on work by the author of CoffeeScript: An Interactive Reference, now available in the iBooks store.
License - http://trevorburnham.mit-license.org/