RealBook - Basic example

This is the cover.

First page.

Page #2.

Page #3.

Page #4.

Page #5.

Page #6.

Page #7.

How it's done

Each page is defined by a <div> inside the #content. The IDs are required for the navigation. The .page class is used for the styling.

   <div id="content">
        <div id="cover" class="page">
            <p>This is the cover.</p>
        </div>
        <div id="page1" class="page">
            <p>First page.</p>
        </div>
        <div id="page2" class="page">
            <p>Page #2.</p>
        </div>
        <div id="page3" class="page">
            <p>Page #3.</p>
        </div>
        <div id="page4" class="page">
            <p>Page #4.</p>
        </div>
        <div id="page5" class="page">
            <p>Page #5.</p>
        </div>
        <div id="page6" class="page">
            <p>Page #6.</p>
        </div>
        <div id="page7" class="page">
            <p>Page #7.</p>
        </div>
    </div> 
    <style type="text/css">

        .page{
            padding:100px 20px;
            text-align: center;
        }

    </style>
    <script type="text/javascript">

        $(document).ready(function(){
            $('#content').realbook();
        });

    </script>