Pageflip5 dokumentation

Erste Schritte

Verwenden Sie als Ausgangspunkt eine der Template-Konfiguration, oder betten Sie Pageflip mit einem einzigen tag (embed-tag) in Ihre eigene Website ein:

Damit der Tag (div#pageflip) arbeitet, verknüpfen Sie diese CSS-Stile und JavaScript-Dateien, in Ihrem HTML-Dokument:

Der letzte Schritt ist die das automatische Starten von pageflip, wenn Ihre HTML-Seite geladen wird. Setzen Sie dieses Skript, nach dem Pageflip tag:

An dieser Stelle hat das Buch noch keinen Inhalt und läuft mit Standart-Einstellungen im Demo-Modus. Im Demo-Modus kann pageflip nur offline ausgeführt werden.

Key Generator

Mit dem Online-Key Generator können Sie Ihre eigenen Key erstellen, alles was Sie brauchen ist Ihr Lizenz-Key. Setzten Sie den Urheberrecht-Text und die Domain(s), auf der das Buch hochgeladen wird (fügen Sie „offline“ zur Domain Liste hinzu um eine Offline-Nutzung zu ermöglichen), drücken die „Generate Key“ Schaltfläche und Ihr Schlüssel ist bereit. Dann fügen Sie den Urheberrechts-Text und den Schlüssel in die key.js ein:

Pageflip läuft nun auf Ihrer Domain.

Sie können mehrere Domains, mit Koma getrennt, in die Liste aufzunehmen. Schreiben Sie nicht www. vor dem Domain-Namen, das Skript entfernt es automatisch.

Zum Beispiel: Das Buch, läuft auf folgender URL: http://www.pageflip.hu/demobooks/book1/
Folgende Domäne muß eingetragen werden: pageflip.hu

Fügen wir einige Inhalte hinzu!

Hinzufügen von Inhalten zu Pageflip

Es gibt zwei Möglichkeiten den Inhalts des Pageflip Buch (Buch) festzulegen:

  • Fügen sie den Inhalt direkt als Kind-Element des embed-Tag ein
  • Speichern Sie den Inhalt in einer externen HTML-Datei
In beiden Fällen verwenden wir das gleiche Format, der einzige Unterschied ist die Positionierung. Hier ist ein Beispiel für ein einfaches Buch mit 8 Seiten im embed-Tag definiert:

Wenn das gleiche Buch in einem externen HTML-Datei gespeichert wird, sollte der Inhalt dieser Datei wie folgt aussehen:

In diesem Fall müssen Sie auch die URL dieser HTML-Datei in den Konfigurations-Optionen eingestellen:

Bitte beachten Sie, wenn diese Option gesetzt ist, die Daten im embed-Tag überschrieben werden.

Das div ist in diesen Beispielen umschließt den Inhalt der Seite und sind nicht Teil von ihr. Das bedeutet, wir sehen jetzt nur "Cover Page 1", "Cover Seite 2" und so weiter.

Wir haben jetzt grobe Übersicht über die Einbindung und das Einrichten des Inhalts, also schauen wir zu den Abmessungen ...

Pageflip Abmessungen

Pageflip kann auf viele Arten dargestellt: fixe Größe oder skaliert. Der Container, der Pageflip enthält kann auch eine feste Größe haben oder flexibel sein kann.

Aus diesem Grund können Bücher im Browser seitenfüllend sein, oder einfach in einem Beitrag in einer Website eingebunden. Das Buch kann verkleinert werden, um in die zur Verfügung stehende Fläche zu passen und dann vergrößert, um es bei 100% zu sehen. Sie können etwas Platz um das Buch zu lassen, für Design-Zwecke oder zum Platz für die Controlbar und die Thumbnails zu schaffen.

Um besser zu verstehen wie Pageflip angezeigt wird beachten Sie die folgende Abbildung:

Die folgenden Konfigurationsoptionen steuern, wie das Buch angezeigt wird:

StageWidth, StageHeight

Der Arbeitsbereich bzw. Fenstergröße im Browser (Stage) ist optional. Gesetzt wird der Wert fixiert (zentriert im div # pageflip), ansonsten wird auf 100% skaliert und passt exakt in div#pagelfip

PageWidth, PageHeight, CoverWidth, CoverHeight

Die Buchgröße wird aus Seiten- und Umschlaggröße berechnet. Umschlaggröße ist optional und nur erforderlich, wenn der Umschlag größer ist als die Seiten. Der Standardwert für die Seite ist 300x400 Pixel. Sollte das Fenster größer sein als das Buch, wird das Buch zentriert, wenn Sie AutoScale aktivieren (AutoScale: true), und UpScale ausschalten (Standardeinstellung).

AutoScale, UpScale, FullScale, FillScale, FlexibleContent

Alle Größenanpassung sind standardmäßig ausgeschaltet (false).

AutoScale ermöglicht Skalierung des Buchs zentriert im Fenster. Der Zoom ist nur dann aktiviert, wenn das Buch kleiner als 100% angezeigt wird, und Zoom wird es auf 100% zu vergrößern.

UpScale ermöglicht Hochskalierung, die nicht in HTML empfohlen wird. Der Inhalt wird unscharf, da es eine CSS Transformation ist ...

FullScale kontrolliert das div#pageflip, und setzt dessen Größe des Browser-Fensters innerWidth / innerHeight (innere Höhe/ innere Breite) entsprechen.

FillScale skaliert das Buch so, dass es das Browser Fenster füllt.

FlexibleContent passt die Größe des Buches an das Browser Fenster an, aber der Inhalt wird verzerrt und nicht skaliert.

Margin, MarginTop, MarginRight, MarginBottom, MarginLeft

Beim Skalieren, Positionieren des Buch, werden diese Ränder virtuell den Buches Abmessungen hinzugefügt.

Sie können Platz für die Kontrollleiste machen und die Thumbnails benutzen den Rand: