jPageFlip

jPageFlip ist ein Plug-In für jQuery zur Simulation des Umblätterns von Seiten. jPageFlip unterstützt dabei auch transparente und halbtransparente Bilder. Die aktuelle Version wurde unter der jQuery - Version 1.4.2 getestet. Um jPageFlip nutzen zu können muss jQuery im Script includiert sein. Derzeit können mehrere Parameter (siehe ConfigBereich) geändert werden. Mit den nächsten Versionen wird der Umfang an änderbaren Parametern erweitert. jPageFlip basiert (derzeit) auf der "Canvas-Technologie", sodass nur die Browser Firefox, Chrome, Opera und Safari in ihren aktuellen Versionen unterstützen. Die aktuelle Internet-Explorer-Version (IE8) unterstützt kein Canvas. Die nächste Version (IE9) wird allerdings Canvas unterstützen.

Ab Version 0.9.5 werden transparente Bilder und halbtransparent Bilder unterstützt. Die Unterstützung für HTML5-Video (.ogv(Theora) & .mp4) ist rudimentär integriert und befindt sich noch im Experimentierstatus.

Mit der neuen Version 0.9.7 müssen die Parameter für die Bildgröße ("width" und "height") angegeben werden. Dies ist nötig, da jPageFlip die Bildgrößen per Javascript auslesen muss. Chrome bricht die Abarbeitung von Javascript allerdings ab, wenn andere Scripte auf der Seite fehlerhaft sind, oder aufgrund von Sicherheitsrestriktionen die webkit-Browser ein ordnungsgemäßes Laden von externen Scrpiten verhindern (Bsp.: externe Adverse-Scripts).

Um jPageFlip nutzen zu können, müssen die Bilder innerhalb eines Div-Containers mit ID (z.Bsp. id="myPageFlip") platziert werden. Um die Bilder durch das Modul verabeiten zu können, muß diesen die Klasse "jPageFlip" zugewiesen werden (class="jPageFlip").

   <div> id="myPageFlip">
     <img src="images/clearpage.gif" class="jPageFlip">
     <img src="images/bild01.jpg" class="jPageFlip">
     <img src="images/bild02.jpg" class="jPageFlip">
     ...
     <img src="images/bild10.jpg" class="jPageFlip">
   </div>

Der Aufruf des jPageFlip-PlugIns erfolg folgendermaßen:

   <script type="text/javascript">
     $(document).ready(function(){
       $('#myPageFlip').jPageFlip({
        width: "Bildbreite", 
        height: "Bildhöhe",
         // weitere parameter
       });
     });
   </script>

left (Standard: 0)	horizontale Verschiebung die Bilder innerhalb des Canvas-Containers (Bsp.: top : 30)
top (Standard: 0)	vertikale Verschiebung die Bilder innerhalb des Canvas-Containers (Bsp.: top : 50)
shadowWidth (Standard: 20)	Breite des Schattens in der Buchmitte
shadowOpacity (Standard: 0.7)	Alphawert des Schattens in der Buchmitte (Wertebereich: 0 - 1)
flipOnClick (Standard: true)	Wenn "true", dann erfolgt Seitenwechsel bei Click in die unteren Seitenecken
animationSpeed (Standard: 10)	Geschwindigkeit des Seitenwechsels
animationDynamic (Standard: 10)	Je höher der Wert, desto mehr "ruckelt" der Seitenwechsel, belastet aber weniger die CPU beim Seitenwechsel

Hinweis: Die aktuellen Version von jPageFlip ist eine Beta-Version und sollte deshalb noch nicht produktiv eingesetzt werden.

Changelog

0.9.7 (21.09.2010)	Parameter für Höhe und Breite der Bilder hinzugefügt. Diese Parameter müssen mit angegeben werden. Ansonsten kann es unter webkit-Browsern zu Problemen beim laden von Bildern kommen.
0.9.6 (03.09.2010)	Preloading von Bildern verbessert. Bis Version 0.9.5 wurden img.onload-Ereignisse verwendet, um Bilder voraus zu laden. (In Browsern mit Webkit-Javascript-Engine funktioniert img.onload nur eingeschränkt.)
0.9.5 (02.08.2010)	Unterstützung für transparente und halbtransparente Bilder Integration HTML5-Video (Status: Alphaversion)
0.9.4 (01.08.2010)	Fehlerhaftes Zurückblättern bei manchen Mauspositionen beseitigt. Performanceprobleme die bei Safari aufgretreten sind, beseitigt. Beseitigung des Fehlers, dass ggf. Bilder beim ersten Aufruf der Seite nicht angezeigt werden beseitigt.
0.9.3 (25.07.2010)	Sanfter Seitenwechsel (konfigurierbar)
0.9.2 (19.07.2010)	Integration von (konfigurierbaren) Schatten in der Seitenmitte Umschlagen der Seiten bei Click auf die unteren Seitenecken (optional) Vorausladen der Startbilder um Javascript-Fehler im Safari zu beheben. Performanceprobleme im Safari veringert Cursor angepaßt
0.9.1 (15.07.2010)	Erstellt

Roadmap

- dynamischer Hintergrund
- Unterstützung für HTML5 - Video (ab Version 0.9.5 als "experimantal version" integriert

Andreas Hecht - 2010-08-30 09:31:16

Hi Erik, eine funktionierende Demo Deines Plugins wäre wünschenswert. Unter meinem Firefox 3.6.8 und unter Safari tut sich leider gar nichts...

Kim - 2010-09-03 18:17:30

Cooles PlugIn. Ich hoffe, dass die Videofunktion bald integriert wird. Vielleicht kannst Du ja noch ein paar zusätzliche Beispiele auf der Website mit anbieten.

Erik - 2010-09-03 18:39:46

Hallo Andreas, beschreibe mal bitte genauer was nicht geht (gern auch als Email). Die Seite habe ich unter folgenden Browsern getestet: Firefox 3.6.8, Safari 5, Chrome 5, Opera 10.

techwraith - 2010-09-12 11:26:53

Hi there, I was wondering if there was a way to make this automatically scale to be full screen. Let me know if you have any suggestions. Thanks!

Erik - 2010-09-15 20:47:48

hello techwraith, I dont'n know exactly, what do you want to scale. Do you want scale the content by click on the content? A scale-function is not currently implemented. If you have more querstions, you can also write an email.

--ms-- - 2010-09-28 14:36:09

Koennte am Scriptblocker liegen: Ohne binlayer.com scheint nix zu gehen.

- 2010-10-02 02:11:24

Keine Demo, echt arm.

Ben - 2010-10-02 08:36:58

Was bist denn Du für einer. Rummeckern und zu feige um seinen Namen anzugeben. Da kann man auch mal höflich anfragen, ob es ne Demo gibt. Kannst ja mal nen Link zu Deiner Seite posten (wenn Du überhaupt eine besitzt). Dann schauen wir mal, ob da alles perfekt läuft.

Erik - 2010-10-02 08:46:20

BinLayer ist Scheiß!!! Hab ich wieder entfernt.

Erik - 2010-10-02 10:41:19

Sorry. Ich habe eine Demo online gestellt.

Jürgen Pirner - 2010-10-07 18:51:08

Wie geil ist das denn? Das habe ich ja schon ewig gesucht - und hier endlich gefunden! Funktioniert absolut smooth unter Safari 4 und Firefox 3.6.8. Genial gemacht.
Gibt es schon einen Plan, eine Schnittstelle für eine externe Blätterfunktion zu integrieren? Also eine Möglichkeit für" Previous/Next Page" via Buttons oder Links - und evtl. eine "Go To Page x"-Sprungmöglichkeit via Textfeld. Oder wäre das jetzt schon möglich? Bin leider kein jQuery-Experte.

baszero - 2010-10-12 10:26:44

Cooles jQuery Teil, das ihr das gemacht habt! Kann man sich irgendwo eintragen lassen, damit man über neue Versionen informiert wird? Unsere Demo läuft in Chrome und Firefox. Falls ihr einen RSS Feed macht in Zukunft, werde ich dies auch gerne erfahren, damit ich den in meinen Google Reader nehmen kann... Vielen Dank und bringt bald die nächste Version! :-) Gruss basZero

Joey - 2010-10-14 23:21:30

Hello. What can i do, if every picture have different size? I cant change size on every picture manually. Have jPageFlip something like auto-resize? I tried this:

< img src="image source" class="jPageFlip" height="800">

, but it didnt work. Is there any solution for this problem? Thanks.

Erik - 2010-10-17 17:27:20

hi joey, sorry, but currently it is not possible to load pictures with different size. But it is a very good idea. I will include this in one of the next versions. Thank you.

vinoth kumar - 2010-10-18 07:20:57

Hi, Can you impletement the navigating the pages using next/prev or page numbers in bottom of the book, like indexing.

Ronaldo - 2010-10-18 17:36:28

Is a great plugin! One idea, why not think about "map area" with callback for custom functions. If I can help, please feel free. Thanks!

Holger - 2010-10-20 09:38:12

Hallo Erik, ich suche nun schon sehr lange nach genau dieser Lösung und bin von Deinem Plugin begeistert, danke. Du sagst, dass die aktuelle Beta nicht wirklich eingesetzt werden soll. Wann ist denn mit einer einsetzbaren Version zu rechnen? Ich würde sie sofort nutzen;-) Nochmal danke und Gruss Holger

Erik - 2010-10-21 18:50:53

Hallo Jürgen, super Ideen. Das sollte kein Problem sein, die Buttons einzubauen. Leider hänge ich gerade in einem anderen Projekt fest, versuche aber schnellstmöglich Zeit zu finden, dass in die nächste Version zu integrieren.

Erik - 2010-10-21 18:56:18

Hallo baszero, vielen Dank für das Lob. Einen RSS-Feed werde ich bei Gelegenheit mal einrichten und hoffe, dass ich bald die Zeit finde, am PlugIn weiter zu arbeiten. Wenn Microsoft den IE9 raus bringt, sollte das ganze auch dort funktionieren. Das muss ich aber noch testen. Genau so im Firefox4.

Erik - 2010-10-21 18:59:11

Hello ronaldo, at first, sorry for my bad English. Unfortunately I have currently not enough freetime, to program some features for the jpageflip-plugin. I would be happy for any assistance. How can you help me? You’ll kike to customize or expand the code of jpageflip. Best wishes

Erik - 2010-10-21 19:01:49

hi vinoth, I try to implement this feature in the next version. Unfortunately I have no idea, when the next version goes online :-(

Erik - 2010-10-21 19:09:44

Hallo Holger, da jPageFlip leider nicht im IE läuft (der hats nicht so mit Canvas :-( ), würden das nicht alle User sehen. Das wird sich mit IE9 aber ändern. Weiterhin basiert jPageFlip auf noch einer recht neuen Technologie, und ich weiß nicht genau, ob das PlugIn überall ordentlich läuft. Ich kann nur jeden animieren, wer Lust und Laune hat, Änderungen am PlugIn für seine Bedürfnisse vorzunehmen. Du kannst die Version natürlich gerne auch schon produktiv einsetzen. Leider fehlen halt noch einige Features, wie das Mapping und Linking.

Erik (Admin) - 2010-10-21 19:16:40

Hiermit stelle ich mal eine allgemeine Frage in die Runde. Kann mir jemand sagen, wie ich einen Div-Container schräg beschneiden kann (clipping), ohne Clip-Mask zu verwenden (ich müßte Inline-SVG nutzen, was nicht jeder Browser versteht). Dann könnte man jPageFlip nochmal ordentlich "aufbohren" und nicht nur Bilder, sondern auch HTML-Code zum umblättern bringen kann. Wer hat eine Idee. Ich bin für jeden Vorschlag offen.

MeftEFFEFSGut - 2011-02-28 08:20:33

hi, new to the site, thanks.

Dex - 2011-03-03 17:36:29

Hi Erik! This is a great component, really looks amazing. My question is how can you get it to flip the pages upwards? For example if you turn the book on its side 90 degrees is it possible to make the pages open upwards?

nick - 2011-05-05 17:00:22

gibt es eine möglichkeit den schatten zwischen den ersten und den letzten beiden seiten zu entfernen? damit das ganze aussieht wie eine geschlossene zeitschrift und erst beim öffnen ein schatten gezeigt wird..

chris - 2011-05-11 13:59:05

Hallo! DAS ist genau was ich suche! :) ABER: Wie stelle ich es an das: Erst nach links - dann nach rechts aufgeklappt wird... zb: wir haben eine art flyer - dieser ist dinA4 und wird zuerst nach links, dann nach rechts aufgeklappt! danach möchte ich meinen inhalt wieder dynamisch als normale webseite haben - ist sowas möglich? oder kan jemand helfen??? :)

mehdi - 2011-05-12 12:01:08

Thanks for this Article. how can we set this js for Right To Left?

- 2011-05-12 20:40:24

How could this be implemented with html/css instead of images?

Draco - 2011-05-18 17:11:57

Hi there, also ich finde diesen \"Fliper\" mal ganz anständig vermisse aber ein paar kleine Funktionen. 1. Automatischer Seitenwechsel alle x Sekunden. Wenn er am Ende ist vielleicht einfach wieder Rückwärtsblättern lassen und dann wieder von vorn, 2. Am linken und rechten Rand ein leicht transparenter ca. 10px breiter Div mit einem Pfeil darin für links und rechts Blättern. Zusatz. Ein Traum wäre noch ein Converter der einen vorhandenen PDF Katalog automatisch zerlegt und das Script erstellt oder bereitstellt. Wahlweise mit Optionen für die convertierung der Bilder (sprich wenn ich den Katalog nur in 400x500 benötige das er die Bilder auch nur in diese Grösse convertiert und natürlich sollte der Verlustfaktor eingestellt werden können. PHP bietet hierbei schon gute fertige Funktionen. Ich denke in dem Moment wo das erreicht ist wird Dein Pagefliper zum BestOf und die anderen können einpacken.

Roland Hentschel - 2011-05-31 14:52:16

Hi! Kann man dieses Script mit Hilfe von excanvas nicht irgendwie auch für den IE < v.9 ans Laufen bringen ?

hi - 2011-09-09 11:00:56

I try to use your script to my pageFlipit\'s very great !!! but i have a problem how can I know N° page ? can you help me please

Karthick - 2011-10-08 13:31:28

Hi, I want to use text instead of images in pageflip. what to do? please kindly reply

Erik (Admin) - 2011-10-24 23:46:36

Hello Karthick,

in the actual version, you can\'t use text, because in a canvas-container you can not use html. I am currently working on the next Version of jPageFlip, where it should be possible to use any html-Text for each page. At Browser such as Firefox, Chrome or Safari it works quite well. In IE (7,8,9) it will not be possible, to clip the div-container at any position (only as rectancle). I hope, that will be possible with IE10. Next, I want to upload a version, which works on all browser (except IE :-( )

Erik

Alexander - 2011-11-28 20:46:33

Erik, sehr schön! Würde besonderes gern die \"Go To Page x\" button funktion haben. Bitte wenn du Zeit hast.... Alles Gutes!

Dmitry - 2011-12-01 02:54:28

sorry if you\'ll get this twice but form submission crashed Can you make it working with 4 corners - add 2 more at the top and alter its behaviour so when I\'m start dragging that from the top side the page turns from its top? I don\'t mind paying for that. Please contact me and let me know the price if you are interested in. Thank you.

Dmitry - 2011-12-02 00:47:51

NVM I\'ve did that myself. Thanks for nicely developed plugin. Also answer to one of the unanswered questions... to get current page number from your app you can use this stupid hack: add this to base.initializeContent function $(base.el).append(\'

\'); setInterval(function(){$(\'#actPage\').html(actPage);},100); this is a div where your actual page number will be placed and a timer to fill it in 10 times a second. you can develop a more intelegent solution. I\'ve just needed that asap so here is it.

Dmitry - 2011-12-02 00:49:52

comment code cleanup sucked and removed the div definition. so you need to add a div with some id (actPage in my sample) and a timer.

Marcel - 2011-12-14 15:26:42

Hallo Erik, find dein plugin echt top......sag mal wie sieht es eigentlich mit der verwendung deines plugins auf einer kommerziellen webseite aus??

Klaus - 2012-01-07 11:05:22

Hallo, das plug-in ist super. Eine echte Alternative zu flash. Bei meinem Beispiel fällt mir auf, dass, wenn das Seitenformat quer ist, die Animation des Blätterns auf das neue Format abgestimmt werden sollte. Welche Parameter kann man dazu ändern? Kurze Info dazu wäre schön. Alles Gute für 2012!

Download

Aktuelle Version: jPageFlip 0.9.7

Download Demoversion

jQuery

jPageFlip benötigt jQuery ab Version 1.4.2, welche kostenlos unter http://jquery.com oder http://jquery.org heruntergeladen werden kann.

jQueryUI - ThemeGallery

Speichere Dein eigenes jQueryUI-Theme auf jQueryUI-Themegallery, oder wähle ein Theme aus der Gallerie aus.

jQuery Buchtip

Mit jQuery kann man zaubern. Auch JavaScript-Muffel kommen mit dem Framework schnell zu Ergebnissen, die sich sehen lassen können. Dieses Buch zeigt Ihnen, wie Sie die Funktionen von jQuery effektiv auf Ihrer Website einsetzen können.

Advertisment

Share jPageFlip

weitere Projekte

jCarousel
jImageRotate
jVideoPlayer
jQueryUI ThemeGallery