title: Making a Turn.js book like in example?
body: <p>I'm currently making a book with turn.js using Jquery of which is going well but I need a little bit of help. You see I'm trying to make a hard-backed journal-type book like the example shown here <a href="http://www.turnjs.com/#samples/html5/1" rel="nofollow">http://www.turnjs.com/#samples/html5/1</a>. My question is, how can I get it so that the pages of the book are smaller than the front and back covers? Also how can I get it so that when I keep turning the pages, the number of pages visibly build up on the other side like in the example?</p>
  
  <p>Can someone please help edit the code of my main page below so that I can get the effect I'm after?</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/turn.js"&gt;&lt;/script&gt;
  &lt;style type="text/css"&gt;
      body{
          background:#ccc;
          }
      #magazine{
          width:1002px;
          height:773px;
      }
      #magazine .turn-page{
          background-color:#ccc;
          background-size:100% 100%;
      }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="magazine"&gt;
          &lt;div class="hard"&gt;A Book&lt;/div&gt;
          &lt;div class="hard"&gt;&lt;/div&gt;
          &lt;div&gt;Page 1&lt;/div&gt;
          &lt;div&gt;Page 2&lt;/div&gt;
          &lt;div&gt;Page 3&lt;/div&gt;
          &lt;div&gt;Page 4&lt;/div&gt;
          &lt;div&gt;Page 5&lt;/div&gt;
          &lt;div&gt;Page 6&lt;/div&gt;
          &lt;div&gt;Page 7&lt;/div&gt;
          &lt;div&gt;Page 8&lt;/div&gt;
          &lt;div class="hard"&gt;&lt;/div&gt;
          &lt;div class="hard"&gt;&lt;/div&gt;
       &lt;/div&gt;
      &lt;script type="text/javascript"&gt;
          $(window).ready(function() {
              $('#magazine').turn({
                                  display: 'double',
                                  acceleration: true,
                                  gradients: !$.isTouch,
                                  elevation:50,
                                  when: {
                                      turned: function(e, page) {
                                           /*console.log('Current view: ', $(this).turn('view'));*/
                                      }
                                  }
                               });
          });
          $(window).bind('keydown', function(e){
              if (e.keyCode==37)
                  $('#magazine').turn('previous');
              else if (e.keyCode==39)
                  $('#magazine').turn('next');
          });
      &lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>