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