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.