Salve a tutti, come da titolo vorrei aggiungere i bottoni avanti e indietro ad un flipbook creato con turn.js.
Ho letto che bisogna usare i metodi
$('#magazine').turn('next');
$('#magazine').turn('previous');
ed inserire uno span con id
ma non riesco a capire bene come fare.
Ho provato ad aggiungere sulla pagina html questo codice
//pagina avanti-indietro
$('#avanti').click(function(){ $('#libro').turn('next'); });
$('#indietro').click(function(){ $('#libro').turn('previous');
});
e successivamente, dopo il tag di chiusura dello script
<span id="avanti">Avanti<span>
<span id="indietro">Indietro<span>
ma non succede nulla, vedo solo la scritta avanti non cliccabile.
Non capisco molto di jquery, e sicuramente sto sbagliando. Qualcuno può aiutarmi?
allego codice della pagina html:
<!DOCTYPE html>
<html>
<head>
<title>flipbook</title>
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js/turn.min.js"></script>
<script type="text/javascript">
$(function() {
// attivo l'effetto
$('#foto').turn({
display: 'double',
duration: 400,
elevation: 50
});
//impostazioni navigazione
$('#avanti').click(function(){ $('#libro').turn('next'); });
$('#indietro').click(function(){ $('#libro').turn('previous');
});
//effetto zoom
$('#zoom').click(function(){ $('#libro').turn('zoom',2); });
// imposto la navigazione anche da tastiera
$(window).bind('keydown', function(e){
if (e.keyCode == 37) $('#foto').turn('previous');
else if (e.keyCode == 39) $('#foto').turn('next');
});
});
</script>
<style type="text/css">
#foto {
width: 1200px;
height: 849px;
margin: 0 auto;
}
#foto .turn-page{
background-color: #CCCCCC;
background-size: 100% 100%;
}
</style>
</head>
<body>
<span id="avanti">avanti</span>
<span id="indietro">indietro</span>
<div id="foto">
<!-- APPLICO LE IMMAGINI COME SFONDO DELLE PAGINE DEL FLIPBOOK -->
<div style="background-image:url(img/1.jpg);"></div>
<div style="background-image:url(img/2.jpg);"></div>
<div style="background-image:url(img/3.jpg);"></div>
<div style="background-image:url(img/4.jpg);"></div>
<div style="background-image:url(img/5.jpg);"></div>
<div style="background-image:url(img/6.jpg);"></div>
</div>
</body>
</html>
Rispondi quotando
