JQuery - Personalizacion del plugin moleskinenotebook

   
Vista:

Personalizacion del plugin moleskinenotebook

Publicado por Chache (2 intervenciones) el 15/10/2013 23:49:58
Hola, tengo implementado el plugin moleskinenotebook, que simula el pasar las hojas de un libro. El contenido que aparece en cada página está encerrado en un div, y a cadauno de estos div los he identificado con id="cap1", id="cap", con la idea de crear un menu con el que me pueda desplazar a cada capitulo concreto, esto lo he hecho con anclas html, Pero no se desplaza, ¿me podeis ayudar?
Gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Personalizacion del plugin moleskinenotebook

Publicado por xve (557 intervenciones) el 16/10/2013 07:21:52
Hola Chache, no entiendo muy bien a que te refieres... nos puedes comentar con mas detalle o mostrar el código?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Personalizacion del plugin moleskinenotebook

Publicado por Chache (2 intervenciones) el 16/10/2013 21:47:20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>El Cuento de Cenicienta</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Moleskine Notebook with jQuery Booklet" />
<meta name="keywords" content="jquery, book, flip, pages, moleskine, booklet, plugin, css3 "/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="booklet/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="booklet/jquery.booklet.1.1.0.min.js" type="text/javascript"></script>

<script src="booklet/jquery.nav.js" type="text/javascript"></script>
<script src="booklet/jquery.scrollTo.js" type="text/javascript"></script>

<link href="booklet/jquery.booklet.1.1.0.css" type="text/css" rel="stylesheet" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>

<script src="cufon/cufon-yui.js" type="text/javascript"></script>
<script src="cufon/ChunkFive_400.font.js" type="text/javascript"></script>
<script src="cufon/Note_this_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1,p,.b-counter');
Cufon.replace('.book_wrapper a', {hover:true});
Cufon.replace('.title', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'});
Cufon.replace('.reference a', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'});
Cufon.replace('.loading', {textShadow: '1px 1px #000', fontFamily:'ChunkFive'});
</script>
<script>
$(document).ready(function() {$('#nav').onePageNav();
$('.do').click(function(e) {
$('#section-4').append('<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>');
e.preventDefault();



$(".selector").booklet({ chapterSelector: true });


//getter
var chapterSelector = $(".selector").booklet( "option", "chapterSelector" );
//setter
$(".selector").booklet( "option", "chapterSelector", true );

});
</script>
</head>
<body>
<h1 class="title">El Cuento de Cenicienta</h1>
<div><!--indice-->
<a href="#cap1">Capítulo 1</a>
<a href="#cap2">Capítulo 2</a>
<a href="#cap3">Capítulo 3</a>
<a href="#cap4">Capítulo 4</a>
</div><!--fin indice-->
<div class="book_wrapper">
<a id="next_page_button"></a>
<a id="prev_page_button"></a>
<div id="loading" class="loading">Cargando páginas...</div>
<div id="mybook" style="display:none;">
<div class="b-load">
<img src="images/hommo_logo.jpg" alt=""/>
<div id="cap1">

<h1>Capítulo 1</h1>


<div><!--indice-->
<a href="#cap1">Capítulo 1</a>
<a href="#cap2">Capítulo 2</a>
<a href="#cap3">Capítulo 3</a>
<a href="#cap4">Capítulo 4</a>
</div><!--fin indice-->

</div>
<div>

<h1>Continuación</h1>

<div><!--indice-->
<a href="#cap1">Capítulo 1</a>
<a href="#cap2">Capítulo 2</a>
<a href="#cap3">Capítulo 3</a>
<a href="#cap4">Capítulo 4</a>
</div><!--fin indice-->

</div>
<div>
<!--<img src="images/3.jpg" alt="" />-->
<a name="cap2"><h1>Capítulo 2</h1></a>

<div><!--indice-->
<a href="#cap1">Capítulo 1</a>
<a href="#cap2">Capítulo 2</a>
<a href="#cap3">Capítulo 3</a>
<a href="#cap4">Capítulo 4</a>
</div><!--fin indice-->

</div>
<div>

<h1>Continuación</h1>

<div><!--indice-->
<a href="#cap1">Capítulo 1</a>
<a href="#cap2">Capítulo 2</a>
<a href="#cap3">Capítulo 3</a>
<a href="#cap4">Capítulo 4</a>
</div><!--fin indice-->

</div>
<div>
<!--<img src="images/5.jpg" alt="" />-->
<a name="cap3"><h1>Capítulo 3</h1></a>

<div><!--indice-->
<a href="#cap1">Capítulo 1</a>
<a href="#cap2">Capítulo 2</a>
<a href="#cap3">Capítulo 3</a>
<a href="#cap4">Capítulo 4</a>
</div><!--fin indice-->

</div>
<div>

<h1>Continuación</h1>

</div>
<div>
<!--<img src="images/7.jpg" alt="" />-->
<h1>Continuación</h1>

<div><!--indice-->
<a href="#cap1">Capítulo 1</a>
<a href="#cap2">Capítulo 2</a>
<a href="#cap3">Capítulo 3</a>
<a href="#cap4">Capítulo 4</a>
</div><!--fin indice-->

</div>
<div>
<!--<img src="images/8.jpg" alt="" />-->
<a name="cap4"><h1>Capítulo 4</h1></a>

<div><!--indice-->
<a href="#cap1">Capítulo 1</a>
<a href="#cap2">Capítulo 2</a>
<a href="#cap3">Capítulo 3</a>
<a href="#cap4">Capítulo 4</a>
</div><!--fin indice-->

</div>
<div>

<h1>Continuación</h1>

<div><!--indice-->
<a href="#cap1">Capítulo 1</a>
<a href="#cap2">Capítulo 2</a>
<a href="#cap3">Capítulo 3</a>
<a href="#cap4">Capítulo 4</a>
</div><!--fin indice-->
<img src="images/9_.jpg" alt="" />

</div>


</div>
</div>
</div>
<div>

</div>
<!-- The JavaScript -->

<script type="text/javascript">
$(function() {
var $mybook = $('#mybook');
var $bttn_next = $('#next_page_button');
var $bttn_prev = $('#prev_page_button');
var $loading = $('#loading');
var $mybook_images = $mybook.find('img');
var cnt_images = $mybook_images.length;
var loaded = 0;

$mybook_images.each(function(){
var $img = $(this);
var source = $img.attr('src');
$('<img/>').load(function(){
++loaded;
if(loaded == cnt_images){
$loading.hide();
$bttn_next.show();
$bttn_prev.show();
$mybook.show().booklet({
name: null,
width: 800,
height: 500,
speed: 600,
direction: 'LTR',
startingPage: 0,
easing: 'easeInOutQuad',
easeIn: 'easeInQuad',
easeOut: 'easeOutQuad',

closed: true,
closedFrontTitle: null,
closedFrontChapter: null,
closedBackTitle: null,
closedBackChapter: null,
covers: false,

pagePadding: 10,
pageNumbers: true,

hovers: false,
overlays: false,
tabs: false,
tabWidth: 60,
tabHeight: 20,
arrows: false,
cursor: 'pointer',

hash: false,
keyboard: true,
next: $bttn_next,
prev: $bttn_prev,

menu: null,
pageSelector: false,
chapterSelector: false,

shadows: true,
shadowTopFwdWidth: 166,
shadowTopBackWidth: 166,
shadowBtmWidth: 50,

before: function(){},
after: function(){}
});
Cufon.refresh();
}
}).attr('src',source);
});

});
</script>

</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar