The most important changes of the next version (available end of March 2019) are::

2019-04-06 Zoom and Pan improvements on PC

The book now is zoomed-in with the actual mouse position as focus point; i.e. the selected position of the page stays in focus and remains visible (i.e. within the viewport) even if zoomed-in by the maximum value of factor 4.
If the keyboard operation is used (“+” to zoom in and “-” to zoom out), the last selected focus point is used: either the last position with t mouse scroll or the position of the last mouse click.

If no mouse or touchpad is available a pure keyboard control is possible:

  • + zoom in
  • zoom out
  • a-w-d-x for “left-up-right-down” move of the enlarged page
  • s center the enlarged open book

Reason: A mouse-scroll with the CTRL-key pressed is always interpreted by the browser. This cannot be prevented any longer, because the browser forces the “expected user experience”.

2019-03-27 Documentation reworked

Almost all (at least EN) pages had been touched and checked and improved: broken links fixed, typos, strange “translations”, missing parts, new chapters.
Hopefully, everything now is up to date and understandable ;-)

23.03.2019 Open Project functionality completely reworked

The columns show some key project data:

  • Mz3 Project Name
  • Modification Date
  • Page Count
  • Language(s)
  • Count of Page Images PIMG; across all languages)
  • Thumbnail count; total across all languages
  • Count of PDF converted pages across all languages (i.e. the count of JPG, PNG, SWF files each)
  • Element count over all languages, separate by element type: Sound/Audio, Video and Links/Areas

A double click in a row opens the respective project.
A single click selects the project, which then can be opened via the Open button

Every column can be sorted with a click into the title (header cell) of a column.
A next click into the same column header reverts the sort direction.
The selected project remains selected and visible.

Very helpful also for plausibility checks and bug fixing

03/20/2019 Support of Zoom and Pan with mouse or keyboard in Desktop Browsers

Now it is possible to zoom the book (and only the book: Thumbnails and navigation bar remain untouched) via mouse gestures or keyboard short cuts in all modern browsers:.

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Opera

Mouse Gestures

  • “Swipe” gesture with the mouse
    Press the left button and drag the mouse with “some” speed” left/right or up/down to simulate a touch swipe gesture (supported on mobile devices):
    • “Swipe Left”: Previous Page
    • “Swipe Right” Next Page
    • “Swipe Up”: Show Thumbnails
    • “Swipe Down”: Hide Thumbnails
  • Zoom: Scroll the Mouse Wheel to zoom in and out
  • Pan: Drag the mouse with pressed left mouse key
    In case the book was scaled up, it is possible to “move” the book (pan gesture) so the area of interest is positioned within the viewport (visible area of the window).
    In this case (zoom factor > 1) a Swipe is no longer supported.
    Only after the original scale factor of 1 is reached (it is not possible zooming out to scale factors less than 1), the book is reset, i.e. adjusted to the window size.

Keyboard operation

For those who prefer operation by key clicks, all can be achieved via key codes also!

h5: Extended, big keyboards
If a keyboard with Arrow keys or even a numeric pad is available the following keys are supported:

  • Arrow Left/Right: Previous/Next Page
  • Arrow Up/Down: Show/Hide Thumbnails
  • Home/End: First/Last Page
  • Page Up/Down: Zoom In/Out
  • +/- Keys: Zoom-In/Out
  • Arrow Keys on Numeric Pad (on keys 4-8-6-2):
    All Browsers but Edge: Move the scaled-up book with the Arrow Keys on the numeric pad.
    Edge Browser: The Arrow Keys on the numeric pad have the same functions as the “standard” arrow keys (previous/next page, show/hide Thumbs).

Small Keyboard

If the special keys are not available, everything can be operated via special “sets” of alpha keys.
4 adjacent keys are used as a set of keys for the Pan and Page/Thumb control:

  • PAN: A-W-D-X: Move the Book left (“A), up (“W”), right (“D”) or down (“X”)
  • Page/Thumb J-I-L-M: Previous Page (“J”)/Next Page (“L”), Show Thumbs (“I”)/Hide Thumbs (“M”)
  • Zoom-out/in: “U” and “O”

The keys in the middle f the blocks set the book to the original position (0,0 coordinate: “S”-Key) or perform a Reset (“K”-Key).

Alternatively also the “Enter-” and “Space-” Keys perform a reset.

This all should offer sufficient options so everybody can find his perfect “mode of operation”.

BTW: We plan to create a special Help-Po-Up” that shows the most important operations (mouse gestures, keycode); in English and German.
This Pop-Up can be activated via a special Icon/Key (most probably the “?” key) that can be added to the navigation bar or burger menu.

10.03.2019 Thumbnail Support in Javascript

If Page Images are added to the book, the respective Thumbnails are generated automatically.
Thumbnails can be shown in a “Thumb Bar” beneath the book (in the Javascript Version only; the viewer and Flash versions support the “bubbles” only).

Thumbnails can be “swiped” (touch gesture with a finger or simulated with a mouse drag) to move to previous/next pages. The faster the swipe, the bigger the page jump ;-)
Thumbs can be hidden with a sipe down and shown again with a swipe up.
Hiding thumbnails can be helpful to better use the available space for the book.

Thumbnails also can be added independently on a “Page Image Add” operation. Selected Images can be loaded and are converted into thumbnails. The thumb number (page number – 1) can be extracted from the file name or adjusted in several ways via the advanced settings in the Thumbnail WIndow.

03.03.2019 Burger Menu

Additionally to the standard navigation bar a new “burger menu” is supported. This icon is known from websites with special support for mobile devices. The name describes pretty well the icon:
The for horizontal bars look like the stacked layers of a burger ;-)

In the Javascript Settings, it is defined, if the burger menu and/or the navigation bar are shown. If both are selected, the navigation bar is shown in landscape mode and the burger menu in portrait mode and switched automatically, if the mobile device is turned (or the window is scaled so a different aspect ratio of the window is achieved).
In case not all navbar elements would fit, the font and icons are scaled down until a minimal font-size of 8px or icon size of 24px width is reached. After that, the burger menu is selected automatically.

The full burger menu is shown after a click on the burger menu icon
All “tabs” (navigation elements, i.e. either a descriptive text or an icon with tooltip) are listed in kind of table with adjusted width and height.
Another click toggles the list, i.e. closes the table.

20.02.2019 PopUp Menu

To inform or “motivate” users of the book, a Pop-Up Menu can be defined. Such Pop-Ups usually remind to subscribe to a newsletter; or accept special offers.
Content and design can be defined in a special window; available in the Javascript Settings.
The Pop-Up will be shown after a selectable time and/or when the main area is left (in desktop browsers only!).
It also can be defined how often the pop-up is shown (once per session, ever n days).

20.02.2019 Additional HTML Parameters

The index.html file supports several “Meta Tags”. Those tags can be set via Javascript Parameters. WIth such Meta Tags, it e.g. is possible to select which image is shown in a facebook link.
The following screenshot shows a list of supported parameters. This list was achieved in filtering the Javascript book parameters with the keyword “HTML”.

Improved Google Analytics Support for JavaScript

Now a more granular reporting is supported, i.e. all three levels of details plus an optional value are supported now:

  • event
  • category
  • label
  • value
  1. Settings – Configure JavaScript Settings
  2. Book Parameters
  3. Search/Filter: “analyt” (or ‘gaaccount’ or ‘google’ or …)
  4. Click on ‘gaaccount’
  5. Enter your Google Analytics ID: UA-xxxxxxxx-x, confirm with ‘Return’ and ‘Save’

GA Events

The following events are used and tracked: * openMagazine
Triggered whenever the magazine is opened

  • video
    Triggered when the user interacts with an in-book-video
    Supported labels:
    • ‘playSpVid’ + videoName
    • ‘pauseSpVid’ + videoName
      Supported value (pause only):
    • current time when paused
  • sound
    Triggered in case of any interaction with a sound element.
    Supported labels:
    • ‘playSound: ‘ + soundName
    • ‘pauseSound: ‘ + soundName
      Supported value (pause only):
    • current time when paused
  • goto_page
    Whenever a new page is opened, this event is triggered
    Supported label:
    • the destination, i.e. the page number selected
      Supported value:
    • number of skipped pages
  • mz3Click
    If an Mz3 Element is clicked, this event is triggered.
    Supported labels (clicks) are
    • clicks on an external link (<a> tag with href defined)
    • clicks on an internal link (<a> tag with onclick defined)

GA Category

As category always the actual Mz3 Book Title (project name) followed by an (optionally) defined <head><title> is tracked
Such Meta Title can be entered via Book Parameters as htmlTitle (Search/Filter for it!).


What is tracked as a label depends on the kind of Event.

  • video and sound Events
    Play and Pause interactions are tracked independently

  • goto_page Event
    The page number of the page that is opened (jumped to)
  • mz3Click
    The destination of the clicked element’s anchor tag:
    • The path of the external URL
    • The internal page number (or anchor name)
Revision: 6
Last modified: 2019/04/07


Was this helpful?

Yes No
You indicated this topic was not helpful to you ...
Could you please leave a comment telling us why? Thank you!
Thanks for your feedback.

Post your comment on this topic.

Post Comment