JQuery - Personalizacion del plugin moleskinenotebook

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 clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 1

Val: 302

Personalizacion del plugin moleskinenotebook

Publicado por xve (673 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 clara

No me gusta: Está respuesta no esta clara o no es útil

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>
<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>
<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>
<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>

</div>
<div>

<h1>Continuación</h1>

<div>
<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>

</div>
<div>

<a name="cap2"><h1>Capítulo 2</h1></a>

<div>
<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>

</div>
<div>

<h1>Continuación</h1>

<div>
<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>

</div>
<div>

<a name="cap3"><h1>Capítulo 3</h1></a>

<div>
<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>

</div>
<div>

<h1>Continuación</h1>

</div>
<div>

<h1>Continuación</h1>

<div>
<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>

</div>
<div>

<a name="cap4"><h1>Capítulo 4</h1></a>

<div>
<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>

</div>
<div>

<h1>Continuación</h1>

<div>
<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>
<img src="images/9_.jpg" alt="" />

</div>

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

</div>


<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

Comentar