Getting Started with vbook.js

1. Download the code

Vbook is build to be easy integrated in any website. It is developed with pure JavaScript and CSS and does not require any third-party frameworks or components.
Download ready-to-use compiled code to easily drop into your project, the download includes:

Compiled and minified CSS file vbook.min.css
Complied and minified JavasScript file vbook.min.js
Demo Folder containing running examples of vbook

Download vbook.js V0.1.7

2. Include vbook in your HTML

In order to render vbooks on your website you need to:

Add vbook.min.js and vbook.min.css in your HTML head tag <head>
Add the vBook HTML inside the page body tag <body>
Add the initialization script after closing body tag </body>

A minimal version of your HTML page could look like this:

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>vbook</title>
        <link href="vbook.css" rel="stylesheet" type="text/css">
        <script src="vbook.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="vbook"></div>
    </body>
    <script>
        const myBook = new Vbook('.vbook', {});
    </script>
</html>

That's it – To customize your vBook keep on reading...

Basic Setup

By adding data attributes to the vbook element you can set the basic appearance of each virtual book.
A complete list of all available attributes you will find bellow.

<div class="vbook" data-width="20" data-height="30" data-spine="20"></div>

Dimensions & Rotation

data-width – Width of your book
data-height – Height of your book
data-spine – Thinkness of your book
data-ratate-x – initial x rotation of the book in degrees
data-ratate-y – initial y rotation of the book in degrees

Note: For the different dimension you can just measure a real book and enter the milimeter values

Book Cover & Spine

data-cover-thikness – Thikness of the cover material
data-cover-color – Background color of the cover (front/back) e.g. #ff99aa
data-spine-thikness – Thinkness of your book
data-spine-color – Background color of the spine

Book Pages

data-pages – Number of pages. If set to 0 user will not be able to open the book. if set to auto it will adapt to the number of pages you have added in HTML (see section "add pages" below)
data-pages-color – paper color of the pages
data-pages-offset – defines the offset of the pages to the cover. If set to "0" there will be no offset = soft cover binding.

UI Settings

data-ui-arrows – 0 will hide the left/right navigation arrows, 1 will show them
data-ui-pagination – 0 will hide the pagination, 1 will show the pagination
data-ui-pagination-limit – limits the number of visible dots
data-ui-pageing – shows page numbers (1/12)

Adding images

To add images to covers, spine, pages and even the paper body, you can add additional HTML elements with a data-src attribute inside your vbook tag.

<div class="vbook">
    <div class="cover-font" data-src="assets/cover_front.png"></div>
    <div class="cover-back" data-src="assets/cover_back.png"></div>
    <div class="cover-spine" data-src="assets/cover_spine.png"></div>
    ...
</div>

Note: the class names (cover-front, cover-back ect.) are important for the script to indentify the correct image. Don't change them.

Adding Pages

You can add as many pages to your vbook as you like

<div class="vbook">
    ...
    <div class="page" data-src="media/page_1.jpg"></div>
    <div class="page" data-src="media/page_2.jpg"></div>
    <div class="page" data-src="media/page_3.jpg"></div>
    ...
</div>

Adding paper body images

To make the vbook look more realistic, you also can add images of the paper body.

<div class="vbook">
    ...
    <div class="pages-fore" data-src="media/page_fore.jpg"></div>
    <div class="pages-head" data-src="media/page_head.jpg"></div>
    <div class="pages-tail" data-src="media/page_tail.jpg"></div>
</div>

The final vbook HTML

The complete HTML code of a customized vbook with 3 spreads could look like this:

<div class="vbook" data-width="20" data-height="30" data-spine="20" data-cover-thikness="1.5" data-spine-thikness="1.5" data-pages-offset="2">
    <div class="cover-font" data-src="media/cover_front.jpg"></div>
    <div class="cover-back" data-src="media/cover_back.jpg"></div>
    <div class="cover-spine" data-src="media/cover_spine.jpg"></div>
    <div class="page" data-src="media/page_1.jpg"></div>
    <div class="page" data-src="media/page_2.jpg"></div>
    <div class="page" data-src="media/page_3.jpg"></div>
    <div class="page" data-src="media/page_4.jpg"></div>
    <div class="page" data-src="media/page_5.jpg"></div>
    <div class="page" data-src="media/page_6.jpg"></div>    
    <div class="pages-fore" data-src="media/page_fore.jpg"></div>
    <div class="pages-head" data-src="media/page_head.jpg"></div>
    <div class="pages-tail" data-src="media/page_tail.jpg"></div>
</div>

This is all you need to style and add content to the vbook.
If you need more control of the interactions read the API documentation.

Multiple vbooks on one page

You can have multiple vbooks on the same HTML page. To initialize them, you can use our built in wrapper function:

const mybooks = vbooks('.vbook', {
    // any options
});