inserire altre pagine in un libro fatto con jquery

cavaliere123

Utente Attivo
31 Lug 2012
416
0
16
Buonasera a tutti e ben ritrovati

Ho cercato uno script per creare un libro sfogliabile fatto però non con elementi di macromedia ma solo con le jquery.

ed ho trovato questo che adesso vi posto :

HTML:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="turn.min.js"></script>

<style type="text/css">
body{
background:orange;
}
#book{
width:800px;
height:500px;
}

#book .turn-page{
background-color:white;
}

#book .cover{
background:yellow;
}

#book .cover h1{
color:red;
text-align:center;
font-size:50px;
line-height:500px;
margin:0px;
}

#book .loader{
background-image:url(loader.gif);
width:24px;
height:24px;
display:block;
position:absolute;
top:238px;
left:188px;
}

#book .data{
text-align:center;
font-size:40px;
color:#999;
line-height:500px;
}

#controls{
width:800px;
text-align:center;
margin:20px 0px;
font:30px arial;
}

#controls input, #controls label{
font:30px arial;
}

#book .odd{
background-image:-webkit-linear-gradient(left, #FFF 95%, #ddd 100%);
background-image:-moz-linear-gradient(left, #FFF 95%, #ddd 100%);
background-image:-o-linear-gradient(left, #FFF 95%, #ddd 100%);
background-image:-ms-linear-gradient(left, #FFF 95%, #ddd 100%);
}

#book .even{
background-image:-webkit-linear-gradient(right, #FFF 95%, #ddd 100%);
background-image:-moz-linear-gradient(right, #FFF 95%, #ddd 100%);
background-image:-o-linear-gradient(right, #FFF 95%, #ddd 100%);
background-image:-ms-linear-gradient(right, #FFF 95%, #ddd 100%);
}
</style>
</head>
<body>

<div id="book">
<div class="cover"><h1>PRIMA </br>COPERT</h1></div>
</div>

<div id="controls">
<label for="page-number">Page:</label> <input type="text" size="3" id="page-number"> of <span id="number-pages"></span>
</div>

<script type="text/javascript">

// Esempio di utilizzo di pagine dinamiche con turn.js

var numberOfPages = 10;


// Consente di aggiungere le pagine che il libro avrà bisogno
function addPage(page, book) {
// In primo luogo verificare se la pagina è già nel libro
if (!book.turn('hasPage', page)) {
// Creare un elemento di questa pagina
var element = $('<div />', {'class': 'page '+((page%2==0) ? 'odd' : 'even'), 'id': 'page-'+page}).html('<i class="loader"></i>');
// Se poi non aggiungere questa pagina
book.turn('addPage', element, page);
// Supponiamo che i dati provenienti dal server e la richiesta prende 1s.
setTimeout(function(){
element.html('<div class="data">Data per page '+page+'</div>');
}, 1000);
}
}

$(window).ready(function(){
$('#book').turn({acceleration: true,
pages: numberOfPages,
elevation: 50,
gradients: !$.isTouch,
when: {
turning: function(e, page, view) {

//Ottiene l'intervallo di pagine che il libro ha bisogno in questo momento
var range = $(this).turn('range', page);

// Verificare che ogni pagina è all'interno del libro
for (page = range[0]; page<=range[1]; page++)
addPage(page, $(this));

},

turned: function(e, page) {
$('#page-number').val(page);
}
}
});

$('#number-pages').html(numberOfPages);

$('#page-number').keydown(function(e){

if (e.keyCode==13)
$('#book').turn('page', $('#page-number').val());

});
});

$(window).bind('keydown', function(e){

if (e.target && e.target.tagName.toLowerCase()!='input')
if (e.keyCode==37)
$('#book').turn('previous');
else if (e.keyCode==39)
$('#book').turn('next');

});

</script>


</body>
</html>

ho scelto questo perchè posso mettere la copertina del libro chiuso e perchè rispetto agli altri più facile da leggere e comprendere
Ma nonostante ciò, ho un problema... ho individuato chiaramente la parte di codice dove lui inserisce quante pagine del libro desidero ma non sono riuscito a trovare i div dove poter inserire il testo pagina per pagina... c'è solo la var element che porta la stessa scritta per ogni pagina. E' una mia dabbenaggine o non c'è e se è questo il caso come posso aggiungere questa parte di codice.
Grazie per eventuali risposte.
p.s. : chiaramente se avete a disposizione un codice che fa la stessa cosa potete tranquillamente dirmelo
 
Discussioni simili
Autore Titolo Forum Risposte Data
Elisacau [Contact form 7] Inserire Numero auto incrementante WordPress 1
gara1 inserire immagine di sfondo in canvas Javascript 0
FDF182 Inserire pdf in db PHP 3
otto9due Inserire o aggiornare tabella my sql controllando una coppia di valori PHP 7
Couting95 inserire dati da un file di testo in una tabella in php PHP 1
D Inserire link PHP 0
L PHPSpreadsheet inserire dati da file .xlsx/.xls su database PHP 2
P inserire due voci in un titolo post wp WordPress 1
R inserire video nel sito HTML e CSS 15
J Inserire blog wordpress in angular CMS (Content Management System) 0
A inserire variabile php colore in div html PHP 2
L inserire dati multi livello PHP 8
G Inserire una scritta Java 1
M Inserire variabile nella value di una hidden PHP 3
S Inserire foto in ogni cella di una tabella Javascript 0
G inserire dati automaticamente in mysql PHP 0
B Vorrei inserire una finestra con messaggio ad un history.back PHP 16
Shyson Inserire placeholder nel campo cerca PHP 5
M Lanciare alert se il codice fiscale è già presente nel db e lasciare la scelta di inserire all'utente PHP 42
atipika INSERIRE ICONE DOWNLOAD E STAMPA WORDPRESS WordPress 10
F Creare un set di date a seconda del frazionamento scelto da inserire in MySQL PHP 6
B inserire valori da una tabella a un altra mysql PHP 34
D [Javascript] inserire uno script in un file php Javascript 6
napuleone [HTML] type="file" inserire path di partenza HTML e CSS 4
Monital [Javascript] inserire dati estratti dal db in html fisso Javascript 1
R [WordPress] Inserire campi aggiuntivi ad un Submit Form già dato dal template (front-end) WordPress 0
M inserire i dati ottenuti da una jquery in una tabella già esistente jQuery 1
G Inserire "Leggi il resto dell'articolo" con link al post sul sito preso via RSS Email Marketing 0
M [PHP] Come inserire codice html in un ciclo while PHP 2
P [PHP] Inserire stringhe in input(text),memorizzarle e stamparle in file successivo PHP 0
J [Javascript] Inserire un caricamento con animazione prima dell'esecuzione di un'azione Javascript 1
Shyson [PHP] Inserire testo nel codice PHP 2
D Mailchimp - Possibile inserire doppia condizione per i triggers? Email Marketing 0
A [MS Access] Pulsante per inserire allegati in campo maschera MS Access 0
Shyson [HTML] Inserire nuovo font con @font-face HTML e CSS 5
Alex_70 Inserire photo in php PHP 0
D [Javascript] [HTML] Inserire slash dopo 3 numeri Javascript 5
F INSERIRE IN UN'UNICA CASELLA DI TESTO REPORT ACCESS I VALORI DELLA TABELLA DI UN'INTERA COLONNA MS Access 2
A [HTML] Come inserire google review stars nelle pagine del mio sito HTML e CSS 0
spider81man Connettersi ad un DB ed inserire dati con Javascript Javascript 3
spider81man [PHP] Inserire file .pdf in db PHP 6
P [WordPress] Inserire codice in pagina dinamica WordPress 0
A [PHP] Ciclare array multidimensionale e inserire valori in DB PHP 2
M [PHP] Inserire array nel db PHP 6
andreas88 [HTML] come inserire 3 riquadri in un unico rigo (vedere img allegata) HTML e CSS 11
G [PHP] inserire risultato di una query in una tabella PHP 3
P [Javascript] Inserire una nuova condizione in una funzione Javascript 3
G [Guida MyBB 1.8] Inserire icone accanto alle sezioni CMS (Content Management System) 0
M [wordpress-galleria immagini]Inserire classe php in html PHP 0
C Inserire dati tabella leggendo parte di altra tabella con php PHP 13

Discussioni simili