Created: 25/09/2014 By: Evgenii Pogrebnyak Email: e.pogrebnyak@mail.ru
Welcome to OneBook3d documentation if you have additional questions that are not included in this document, please email me. Thanks! Special notes for local security reasons, some things will not work locally, but everything will work on your website. OneBook3d is supported only by: Chrome, Opera (WebKit), Firefox and Safari. Dependencies The plugin oneBook3d needs a jQuery (1.x or 2.x) and MouseWheel (3.1.9+) (optional) for work. Directory and files structure The ‘examples’ folder contains ready to use templates with javascript files. How to use quick way to start use the plugin is edit one of example templates from the 'examples' folder.
To get started you need to call the plugin and pass the images array.
Examples of images array:
var arr = [ './gallery/001.jpg','./gallery/002.jpg','./gallery/003.jpg','./gallery/004.jpg','./gallery/005.jpg', './gallery/006.jpg','./gallery/007.jpg','./gallery/008.jpg','./gallery/009.jpg','./gallery/010.jpg' ];
var arr = [ [’./gallery/001.jpg’,’title1’],[’./gallery/002.jpg’,’title2’], [’./gallery/003.jpg’,’title3’],[’./gallery/004.jpg’,’title4’], [’./gallery/005.jpg’,’title5’],[’./gallery/006.jpg’,’title6’] ];
Example:
Example with titles:
var arr = [ [’./gallery/001.jpg’,’title1’],’./gallery/002.jpg’, ’./gallery/003.jpg’,[’./gallery/004.jpg’,’title4’], [’./gallery/005.jpg’,’title5’],’./gallery/006.jpg’ ];
Example with titles or not:
You can add as many images to array as you want. Plugin has smart loading system.
Plugin options:
startPage int, page that will be displayed when the book starts, default:1 flip string (’basic’,’soft’), type of the flip animation, default:’basic’ skin string (’dark’,’light’), the book’s skin mode. Can be as array with two values for both embedded and fullscreen plugin mode, default:’dark’ bgDark text/css, set background image for ‘dark’ skin, default:’’ bgLight text/css, set background image for light’ skin, default:’’ pageСolor text/css, set color for all pages in book, default:’white’ slope int (0 | 1 | 2), slope mode, default: 0 border int, space around images, default:30 language string (’en’, ‘ru’), skin language, default:’en’ cesh boolean (true/false), cesh images, default:true
Example of calling the plugin:
$('#div0').onebook( arr0); $('#div1').onebook( arr1, { flip:'soft', border:25 }); $('#div2').onebook( arr2, { skin:'light', flip:'soft', startPage:6 }); $('#div3').onebook( arr3, { slope:1, pageColor:’gold’ }); $('#div4').onebook( arr4, { flip:'soft', border:25, slope:1 }); $('#div5').onebook( arr5, { skin:'dark', bgDark:’url(”./images/bg.jpg”)’, flip:'soft'}); $('#div6').onebook( arr6, { skin:'light', bgLight:’url(”./images/bg2.jpg”);background-size:cover;’ }); $('#link1').click(function(){ $.onebook( arr7, { skin:'light', flip:’ocean’, border:0, cesh:false }) });
For book embedded in div element
For book which will be shown by click
Use option ‘cesh:false’ while you are testing your book and ‘cesh:true’ (by default) in web.
Additional note:
Minimal width of parent element for book is 266 px. After that the book will be hidden.