diff --git a/index-iscroll.html b/index-iscroll.html deleted file mode 100755 index 8cfd4e2..0000000 --- a/index-iscroll.html +++ /dev/null @@ -1,569 +0,0 @@ - - - - -PortableMag - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
-
-
- - - - - - PortableMag cover - - - - - - - Mag - Portable - - A suit for publishing portable periodic magazines on mobile platforms. - - - - - - -
-
- - - -
-
-
-

The Basics...

- -

Main features

-
    -
  • Magazines, Covers, Articles and Pages, fully navigable -
  • Three main views: Magazine (under development) Page and Ribbon -
  • Fully linkable structure -
  • Full intuitive Gesture, Mouse or Keyboard navigation -
  • Special #URLs enable full link-based navigation and control -
  • Bookmarks and bookmark navigation -
  • Intuitive navigator widget -
  • Portable to most mobile platforms including: Apple iOS, Android, Windows Phone 7/8, BlackBery, HP webOS and more. -
  • Standalone on main desktop operating systems, including Apple MacOS X and Microsoft Windows -
  • Based on popular, open and easy to learn and use standards (HTML5 layout, SVG vector graphics) - -
  • Usable from the web (support for engines other than WebKit not here yet) -
  • Integrated Editor (under development) -
  • Integrated publishing framework (under development) - -
- - - -
[PAGE NUMBER]
-
-
-
-
-
-

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 #1
- Named 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 cover
- Last page
- Thumbnail view
- Toggle a hidden layer
- - Toggle bookmark
-

Relative special anchors

-

These will get replaced by corresponding page numbers in the URL

- Next page
- Previous page
- Next article
- Previous article
-

History support

- NOTE: this is still a bit flaky...
- Go back
- Go forward
- - - -

- configuration demo -

-
- -
-
-
[PAGE NUMBER]
-
-
-
- - - -
-
- - - - - - - - - - - - PortableMag Anatomy - - Layer 1 - PortableMag Anatomy - - - - - - - Magazine cover - - Article Cover - - Page - - Page - - Next Article - Magazine - Article - - - - - - Page - - Page Content - (safe area) - - - - - - - - This area might get clipped - - - - - - - - - -
[PAGE NUMBER]
-
-
-
-
-

The Page content has a fixed size...

- -
[PAGE NUMBER]
-
-
-
-
- - -

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. -

- -
[PAGE NUMBER]
-
-
-
-
- -
-

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. -

-
- -
[PAGE NUMBER]
-
-
-
-
-
-
-
-

Page Templates

-
-
- -

Inline basic macros

-

- This page contains several examples of inline template/macro fields, - these are HTML elements whos content will get replaced depending on - their class. -

- -

Magazine title

-

- Any element with the class "magazine-title-text" - will be replaced with the magazine title (example: - [MAGAZINE NAME]) -

- -

Page Numer

-

- Any element with a class "page-number-text" will - get replaced with the page number (example: - #) -

-

- NOTE: the selector div.page-number-text will - put the number at the bottom of the page, this page - number is a good example of this. -

- -

Article Index

-

- Any element with the class "article-index" will - be replaced with the links to all the articles in the - current magazine. -

-

- Example:
-

[ARTICLE INDEX]
-

- -
-
-
[PAGE NUMBER]
-
-
-
- -
-
-
-

Two column

-
-
- - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. - -
-
-
[PAGE NUMBER]
-
-
-
- -
-
-
-

Three column

-
-
- -

- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. -

-

- NOTE: at this point, even and odd pages are aligned slightly to the right or left respectively, book-style. -

- -
-
-
[PAGE NUMBER]
-
-
-
- -
-
- Left-aligned page... - -
[PAGE NUMBER]
-
-
-
-
- Center-aligned page... - -
[PAGE NUMBER]
-
-
-
-
- Right-aligned page... - -
[PAGE NUMBER]
-
-
-
-
- Right-aligned page... - -
[PAGE NUMBER]
-
-
-
- -
- -
-
-
-

Page Set Example

- -
[PAGE NUMBER]
-
-
-
-
- Page in set
- -
[PAGE NUMBER]
-
-
-
-
- Page in set
- -
[PAGE NUMBER]
-
-
-
-
-
- -
- - - - diff --git a/index-old.html b/index-old.html deleted file mode 100755 index 487ee81..0000000 --- a/index-old.html +++ /dev/null @@ -1,1124 +0,0 @@ - - - - -PortableMag - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - -
- -
- -
- -
-
- - - - - - - -
-
-
Magazine Title
-
-
-
- - - - Previous bookmark (S-Left) - - - - -
-
- - - - Toggle bookmark (B) - - - - - -
-
- - - - Next bookmark (S-Right) - - - - -
-
- - - - Info - - - i - - - - -
-
-
-
- -
- Cover - < Bookmark - < Article - < Page > - Article > - Bookmark > - End -
- -
-
-
-
-
-
0/0
-
- -
-
-
-
-
- - - - - - PortableMag cover - - - - - - - Mag - Portable - - A suit for publishing portable periodic magazines on mobile platforms. - - - - - - -
-
- - - -
-
-
-

The Basics...

- -

Main features

-
    -
  • Magazines, Covers, Articles and Pages, fully navigable -
  • Three main views: Magazine (under development) Page and Ribbon -
  • Fully linkable structure -
  • Full intuitive Gesture, Mouse or Keyboard navigation -
  • Special #URLs enable full link-based navigation and control -
  • Bookmarks and bookmark navigation -
  • Intuitive navigator widget -
  • Portable to most mobile platforms including: Apple iOS, Android, Windows Phone 7/8, BlackBery, HP webOS and more. -
  • Standalone on main desktop operating systems, including Apple MacOS X and Microsoft Windows -
  • Based on popular, open and easy to learn and use standards (HTML5 layout, SVG vector graphics) - -
  • Usable from the web (support for engines other than WebKit not here yet) -
  • Integrated Editor (under development) -
  • Integrated publishing framework (under development) - -
- - - -
[PAGE NUMBER]
-
-
-
-
-

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 #1
- Named 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 cover
- Last page
- Thumbnail view
- Toggle a hidden layer
- - Toggle bookmark
- -

Relative special anchors

-

These will get replaced by corresponding page numbers in the URL

- Next page
- Previous page
- Next article
- Previous article
-

History support

- NOTE: this is still a bit flaky...
- Go back
- Go forward
-
- - - - - -
[PAGE NUMBER]
-
-
- - - -
-
- - - - - - - - - - - - PortableMag Anatomy - - Layer 1 - PortableMag Anatomy - - - - - - - Magazine cover - - Article Cover - - Page - - Page - - Next Article - Magazine - Article - - - - - - Page - - Page Content - (safe area) - - - - - - - - This area might get clipped - - - - - - - - - -
[PAGE NUMBER]
-
-
-
-
-

The Page content has a fixed size...

- -
[PAGE NUMBER]
-
-
-
-
- - -

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. -

- -
[PAGE NUMBER]
-
-
-
-
- -
-

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. -

-
- -
[PAGE NUMBER]
-
-
-
-
-
-
-

Page Templates

- -

- This page contains several examples of template fields, - the first one is the simplest, the magazine name - ([MAGAZINE NAME]), - then we'll have the index (see next) and in the bottom-right - corner is the page number... -

- -
[ARTICLE INDEX]
- -
[PAGE NUMBER]
-
-
- -
-
-

Two column

-
- Column 1 -
-
- Column 2 -
- -
[PAGE NUMBER]
-
-
-
-
- Left-aligned page... - -
[PAGE NUMBER]
-
-
-
-
- Center-aligned page... - -
[PAGE NUMBER]
-
-
-
-
- Right-aligned page... - -
[PAGE NUMBER]
-
-
-
-
- Right-aligned page... - -
[PAGE NUMBER]
-
-
-
-
-
-
-

Article Cover

- home
- -
[PAGE NUMBER]
-
-
- -
-
- Page - -
[PAGE NUMBER]
-
-
-
-
- Page
- home
- -
[PAGE NUMBER]
-
-
-
-
- -
-
-
-

Page Set Example

- -
[PAGE NUMBER]
-
-
-
-
- Page in set
- -
[PAGE NUMBER]
-
-
-
-
- Page in set
- -
[PAGE NUMBER]
-
-
-
-
-
-
-
-

Configuration demo

- -

- NOTE: this is not an actual configuration page, just a live demo - of some of the available configuration option effects. -

-

- - - - Alternative layouts: native scroll, - iscroll - hand-written drag -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Pages in ribbon: - - - - -
- Transition duration: - - - - -
- Fit page to view: - - -
- Enable different size pages (still flaky): - - -
- Drag in full page view: - - -
- Use transform to drag: - - -
- Enable #URL updating on page flip: - - -
- Toggele viewer themes: - - -
- Toggele theme shadowless mode: - - -
- Full navigation gistory: - - -
- Reset stored data: - - -
- -
- -
- - - - - - - - -
- Fingers supported: - -
- User Agent: - -
- - -
- go back, or return to magazine cover...
-
- - - - - - - - - - - - - - diff --git a/magazine.js b/magazine.js index 1a26f3e..97d1d7a 100755 --- a/magazine.js +++ b/magazine.js @@ -1631,14 +1631,20 @@ var MagazineTemplates = { }, */ - '.image-fit': function(elem){ + // XXX not sure if this is correct... + // does .image-fit mean fitting to page, viewer or image??? + '.image-fit .content': function(elem){ var w = $('.content').width() var h = $('.content').height() elem.each(function(_, e){ e = $(e) - e.width() == 0 ? e.width(w) : 0 - e.height() == 0 ? e.height(h) : 0 + if(e.width() == 0){ + e.css({ 'width': w }) + } + if(e.height() == 0){ + e.css({ 'height': h }) + } }) },