diff --git a/package.json b/package.json index 04ec6cd..a43d23e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "turn.js", - "version": "1.0.4", + "version": "1.0.5", "description": "Web page flipper", "main": "index.js", "repository": "https://github.com/igghera/turn.js.git", diff --git a/readme.md b/readme.md index 976493a..71075c5 100755 --- a/readme.md +++ b/readme.md @@ -1,13 +1,15 @@ A fork of [https://github.com/blasten/turn.js](https://github.com/blasten/turn.js) with support for npm/yarn. -Usage: +## Usage + +### JS ``` import $ from 'jquery'; import 'turn.js'; -$('#flipbook').turn({ +$('#magazine').turn({ width: 800, height: 600, autoCenter: true @@ -15,10 +17,38 @@ $('#flipbook').turn({ }); ``` -Basically I just added a package.json file and specified a main entry point + a -dependency (jquery) to make turn.js installable via npm/yarn. +### HTML -I have submitted a PR to the authors of [https://github.com/blasten/turn.js](https://github.com/blasten/turn.js) but in the meantime you can use this one, as they don't seem to update their repo regularly. +``` +
+
Page 1
+
Page 2
+
Page 3
+
+``` + +### CSS + +``` +#magazine{ + width: 800px; + height: 400px; +} + +#magazine .turn-page{ + background-color:#ccc; +} +``` + +For the full documentation on the library and all available options, please +refer to [https://github.com/blasten/turn.js](https://github.com/blasten/turn.js). + +Basically I just added a package.json file, specified a main entry point + a +dependency (jquery) and fixed a couple of things to make turn.js installable via npm/yarn +and loadable via Webpack in my React project. + +I have submitted a PR to the authors of the original libray, but in the meantime +you can use this one, as they don't seem to update their repo regularly. Latest version uses jQuery 1.12.0 because jQuery 3.x was breaking the page flipper.