Jquery Problems With The Navigation of Moleskine NoteBook Plugin

Jquery Problems With The Navigation of Moleskine NoteBook Plugin

Hi Guys,I have problems with the buttons of this Plugin(Moleski NoteBook with Jquery).I stay using the normal code http://tympanus.net/Tutorials/MoleskineNotebook/MoleskineNotebook.zip?84cd58 of the demo,but I like modify the buttons for create a menu with the effect of Moleski NoteBook with Jquery in the firts page.So I like create buttons for change of each page,I believed that I can change of page of this mode <div id="page01"></div> and on the <a href="#page01">1</a> , but this is not true.

My Question is What I Should to do for create a Menu With The Effect of the Plugin on the Firts page and for change of each Page with The Effect of  Moleski NoteBook Jquery Plugin?

This is My Code:
  2. <!doctype html>
  3. <html>
  4. <head>
  5. <meta charset="utf-8">
  6. <script src="js/jquery-1.4.4.min.js"></script>
  7.  <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
  8.  <script src="js/jquery.booklet.1.1.0.min.js" type="text/javascript"></script>

  10.  <link href="css/jquery.booklet.1.1.0.css" type="text/css" rel="stylesheet" media="screen" />
  11.  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
  12. <link rel="stylesheet" type="text/css" href="css/reset.css">
  13.  <script src="js/cufon-yui.js" type="text/javascript"></script>   
  14. </head>
  15. <body>

  17. <div class="book_wrapper">
  18.   <div id="loading" class="loading">Loading pages...</div>
  19.  <div id="mybook" style="">
  20.  <div class="b-load">
  21.  <div>
  22.  
  23.  <h2>Proyects</h2>
  24.                      <ul> 
  25.                      <li><a href="#page01"> <img src="images/1.jpg" width="112" height="82"></a></li>
  26.                      <li><a href="#page01"> <img src="images/2.jpg" width="112" height="82" style="top:-20px;"></a></li>
  27.                      <li><a href="#page02"><img src="images/3.jpg" width="112" height="82"></a></li>
  28.                      <li><a href="#page02"><img src="images/4.jpg" width="112" height="82"></a></li>
  29.                      </ul>
  30. <p> The user can scroll through the thumbnails
  31.  by using the slider controls. When a thumbnail is clicked,
  32.  it moves to the center and the full image preview opens.</p>
  33.  </div>
  34.  <div id="#page01">
  35.  <img src="images/2.jpg" alt="" />
  36.  <h2>Proyecto 01</h2>
  37.  <p>Today we will create an animated portfolio gallery with jQuery.
  38.  The gallery will contain a scroller for thumbnails and a
  39.  content area where we will display details about the portfolio
  40.  item. The image can be enlarged by clicking on it, making
  41.  it appear as an overlay.</p>
  42.  <a href="#" target="_blank" class="article">Article</a>
  43.  <a href="#" target="_blank" class="demo">Demo</a>
  44.  </div>
  45.  <div id="#page01">
  46.  <img src="images/3.jpg" alt="" />
  47.  <h2>Proyecto 02</h2>
  48.  <p>Today we will create a simple overlay effect to display annotations in e.g. portfolio
  49.  items of a web designers portfolio. We got the idea from the wonderful
  50.  portfolio of www.rareview.com where Flash is used to create the
  51.  effect. We will use jQuery.</p>
  52.  <a href="#" target="_blank" class="article">Article</a>
  53.  <a href="#" target="_blank" class="demo">Demo</a>
  54.  </div>
  55.  <div id="#page02">
  56.  <img src="images/4.jpg" alt="" />
  57.  <h2>Proyecto 03</h2>
  58.  <p>In this tutorial we will create a bubbly image gallery that
  59.  shows your images in a unique way. The idea is to show the
  60.  thumbnails of albums in a rounded fashion allowing the
  61.  user to scroll them automatically by moving the mouse.
  62.  Clicking on a thumbnail will zoom in a big circle and
  63.  the full image which will be automatically resized to
  64.  fit into the screen.</p>
  65.  <a href="#" target="_blank" class="article">Article</a>
  66.  <a href="#" target="_blank" class="demo">Demo</a>
  67.  </div>
  68.  <div id="#page02">
  69.  <img src="images/5.jpg" alt="" />
  70.  <h2>Proyecto 04</h2>
  71.  <p>Today we will create a collapsing menu that contains vertical
  72.  navigation bars and a slide out content area. When hovering
  73.  over a menu item, an image slides down from the top and a
  74.  submenu slides up from the bottom. Clicking on one of the
  75.  submenu items will make the whole menu collapse like a card
  76.  deck and the respective content area will slide out.</p>
  77.  <a href="#" target="_blank" class="article">Article</a>
  78.  <a href="#" target="_blank" class="demo">Demo</a>
  79.  </div>
  80.  </div>
  81.  </div>
  82.  </div>

  84. <!-- The JavaScript -->

  86.         <script type="text/javascript">
  87.  $(function() {
  88.  var $mybook  = $('#mybook');
  89.  var $bttn_next = $('#next_page_button');
  90.  var $bttn_prev = $('#prev_page_button');
  91.  var $loading = $('#loading');
  92.  var $mybook_images = $mybook.find('img');
  93.  var cnt_images = $mybook_images.length;
  94.  var loaded = 0;
  95.  //preload all the images in the book,
  96.  //and then call the booklet plugin

  98.  $mybook_images.each(function(){
  99.  var $img  = $(this);
  100.  var source = $img.attr('src');
  101.  $('<img/>').load(function(){
  102.  ++loaded;
  103.  if(loaded == cnt_images){
  104.  $loading.hide();
  105.  $bttn_next.show();
  106.  $bttn_prev.show();
  107.  $mybook.show().booklet({
  108.  name:               null,                            // name of the booklet to display in the document title bar
  109.  width:              800,                             // container width
  110.  height:             500,                             // container height
  111.  speed:              600,                             // speed of the transition between pages
  112.  direction:          'LTR',                           // direction of the overall content organization, default LTR, left to right, can be RTL for languages which read right to left
  113.  startingPage:       0,                               // index of the first page to be displayed
  114.  easing:             'easeInOutQuad',                 // easing method for complete transition
  115.  easeIn:             'easeInQuad',                    // easing method for first half of transition
  116.  easeOut:            'easeOutQuad',                   // easing method for second half of transition

  118.  closed:             true,                           // start with the book "closed", will add empty pages to beginning and end of book
  119.  closedFrontTitle:   null,                            // used with "closed", "menu" and "pageSelector", determines title of blank starting page
  120.  closedFrontChapter: null,                            // used with "closed", "menu" and "chapterSelector", determines chapter name of blank starting page
  121.  closedBackTitle:    null,                            // used with "closed", "menu" and "pageSelector", determines chapter name of blank ending page
  122.  closedBackChapter:  null,                            // used with "closed", "menu" and "chapterSelector", determines chapter name of blank ending page
  123.  covers:             false,                           // used with  "closed", makes first and last pages into covers, without page numbers (if enabled)

  125.  pagePadding:        10,                              // padding for each page wrapper
  126.  pageNumbers:        true,                            // display page numbers on each page

  128.  hovers:             false,                            // enables preview pageturn hover animation, shows a small preview of previous or next page on hover
  129.  overlays:           true,                            // enables navigation using a page sized overlay, when enabled links inside the content will not be clickable
  130.  tabs:               false,                           // adds tabs along the top of the pages
  131.  tabWidth:           60,                              // set the width of the tabs
  132.  tabHeight:          20,                              // set the height of the tabs
  133.  arrows:             false,                           // adds arrows overlayed over the book edges
  134.  cursor:             'pointer',                       // cursor css setting for side bar areas

  136.  hash:               false,                           // enables navigation using a hash string, ex: #/page/1 for page 1, will affect all booklets with 'hash' enabled
  137.  keyboard:           true,                            // enables navigation with arrow keys (left: previous, right: next)
  138.  next:               $bttn_next,           // selector for element to use as click trigger for next page
  139.  prev:               $bttn_prev,           // selector for element to use as click trigger for previous page

  141.  menu:               null,                            // selector for element to use as the menu area, required for 'pageSelector'
  142.  pageSelector:       false,                           // enables navigation with a dropdown menu of pages, requires 'menu'
  143.  chapterSelector:    false,                           // enables navigation with a dropdown menu of chapters, determined by the "rel" attribute, requires 'menu'

  145.  shadows:            true,                            // display shadows on page animations
  146.  shadowTopFwdWidth:  166,                             // shadow width for top forward anim
  147.  shadowTopBackWidth: 166,                             // shadow width for top back anim
  148.  shadowBtmWidth:     50,                              // shadow width for bottom shadow

  150.  before:             function(){},                    // callback invoked before each page turn animation
  151.  after:              function(){}                     // callback invoked after each page turn animation
  152.  });
  153.  Cufon.refresh();
  154.  }
  155.  }).attr('src',source);
  156.  });
  157.  
  158.  });
  159.         </script>

  161. </body>
  162. </html>