loading... |
The Basics...
PortableMag Navigation and Linking
Finger controls
- Single finger swipe left/right – prev/next page.
- Two finger swipe left/right – prev/next article.
- Single finger swipe up/down – toggle thumbnail view.
- Pinch in/out – go in/out of thumbnail view.
Navigation via #URLs
The basics
Page #1Named page
Anchor on page #3
currently navigation via existing anchors
will break the layout, so use the name attribute
on any other tags (see example).
Special anchors
These show up in the page URL
Magazine coverLast page
Thumbnail view
Toggle a hidden layer
Hide all layers
Relative special anchors
These will get replaced by corresponding page numbers in the URL
Next pagePrevious page
Next article
Previous article
History support
NOTE: this is still a bit flaky...Go back
Go forward
This is an example layer
click or tap to hidePortableMag Anatomy
The magazine consists of:
- Magazine cover
- Articles:
- Article cover
- Pages
The Page content has a fixed size...
Using the content block...
The content block can contain any HTML.
The contents will allways fit the screen, the aspect ratio of the content block is fixed regardless of the viewer.
Contents will not get clipped as long as they are within the block.
NOTE: by default the overflow is visible (see next page), so be carefull.
You can still use the full page area...
Though anything outside the content block can and will get clipped, depending on viewer aspect ratio...
You can see this by resizing the page in browser or rotating the device.
Configuration demo
Pages in ribbon:
Fit page to view:
Animate window resize:
Drag in full page view:
NOTE: this is not an actual configuration page, just a live demo of some of the available configuration option effects.