Rotation sur axe horizontal flipbook avec turn.js
Résolu/Fermémont_dani Messages postés 232 Date d'inscription mardi 6 juin 2017 Statut Membre Dernière intervention 7 mai 2024 - 29 sept. 2022 à 07:30
8 réponses
24 sept. 2022 à 19:56
Bonjour,
Tu dois placer des "boutons" html qui te servirons à déclencher les méthodes previous ou next
$("#flipbook").turn("previous");
$("#flipbook").turn("next");
http://jsfiddle.net/80uaqj3c/4/
A toi de les placer où tu veux....
25 sept. 2022 à 16:40
Bonjour Jordane
Merci pour ton message.
Je n'arrivais pas a faire la rotation sur l'axe horizontal correctenemt.
Je me suis a la recherche d'info sur le net et j'ai trouvé un srcipt qui fait la rotation sur l'axe horizontal sans probleme en utilisant turn.js.
J'y ai integrer les bouton pour pouvoir faire le passage des page au cliq souri, mais ils ne fonctionnent pas.
Voici mon script:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="turn/turnjs4/extras/jquery.min.1.7.js"></script>
<script type="text/javascript" src="turn/turnjs4/lib/turn.js"></script>
<style type="text/css">
#livre{
top: 150px;
margin-left:50%;
}
#col_livre{
justify-content: center;
display: grid;
grid-template-columns: 35%;
}
#livre,
.livre-wrapper {
transform-origin: 0% 0% 0px;
}
#livre .turn-page {
background-image: url('paper-texture.png');
background-repeat: repeat;
}
.page-wrapper>.page {
height: 800px;
width: 600px;
transform-origin: 0% 0% 0px;
}
.flip-control {
width: 400px;
text-align: center;
bottom: 30px;
}
.flip-control a {
margin-left: 10px;
}
</style>
</head>
<body>
<div id="col_livre">
<div class="flip-control">
<a href="#" id="prev"> <h1>Previous</h1> </a>
<a href="#" id="next"><h1>Next </h1></a>
</div>
<div class="livre-wrapper">
<div id="livre">
<div class="page-wrapper">
<div class="page" style="background-image:url(image/ame.png);"></div>
</div>
<div class="page-wrapper">
<div class="page" style="background-color:brown;"><img src="image/logo-main-1.gif" id="img-logo" > </div>
</div>
<div class="page-wrapper">
<div class="page" style="background-color:red;"><H1> ESTo ES UN TEST</H1> </div>
</div>
<div class="page-wrapper">
<div class="page" style="background-color:green;"> test</div>
</div>
<div class="page-wrapper">
<div class="page" style="background-color:orange;" > <H1> A VER LO QUE PASA</H1></div>
</div>
<div class="page-wrapper">
<div class="page" style="background-color:blue;"> prueba</div>
</div>
<div class="page-wrapper">
<div class="page" style="background-image:url(image/main-gauche.gif);"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(window).ready(function() {
var $page = $('.page-wrapper>.page');
var $livreWrapper = $('.livre-wrapper');
var $pageWrapper = $('.page-wrapper');
var $livre = $('#livre');
var height = $page.height();
var width = $page.width();
$page.css('transform', `translate3d(0px, ${width}px, 0px) rotate(-90deg)`);
$livreWrapper.height(width);
$livreWrapper.width(height);
$livreWrapper.css('transform', `translate3d(${width}px, 0px, 0px) rotate(90deg)`)
$pageWrapper.height(width);
$pageWrapper.width(height);
$livre.height(width);
$livre.width(height);
$livre.turn({
display: 'single',
acceleration: true,
gradients: false,
gradients: !$.isTouch,
elevation: 50,
when: {
turned: function(e, page) {
/*console.log('Current view: ', $(this).turn('view'));*/
}
}
});
});
//fonction pour les boutons
var num_pages = $("#flipbook").turn("pages");
$("#previous").mousedown(function(){
var page = $("#flipbook").turn("page");
if(page == 2 || page == 3 || page == num_pages){
$("#flipbook").turn("peel", "l");
}
else{
$("#flipbook").turn("peel", "tl");
}
}).mouseup(function(){
$("#flipbook").turn("previous");
});
$("#next").mousedown(function(){
var page = $("#flipbook").turn("page");
if(page == 1 || page == num_pages - 2 || page == num_pages - 1){
$("#flipbook").turn("peel", "r");
}
else{
$("#flipbook").turn("peel", "tr");
}
}).mouseup(function(){
$("#flipbook").turn("next");
});
</script>
</body>
</html>
Pourrais-tu me dire ou et pourquoi les boutons ne fontionnent pas?
Merci par avance
25 sept. 2022 à 17:23
Sûrement que si tu utilisais les bons id dans ton code JavaScript ça fonctionnerait mieux... Previous n'est pas la même chose que prev ....
25 sept. 2022 à 17:57
Oui surement que ca peut aider.
Mais cel ne fontonne toujours pas
25 sept. 2022 à 20:14
Peux tu montrer ton code modifié ? ( je ne suis pas encore capable de voir ton écran par télépathie... :-) )
Et peux tu nous montrer ce que la console de ton navigateur affiche lorsque tu cliques ? pas de message d'erreur ? ni au chargement de la page ?
26 sept. 2022 à 09:02
En attendant que tes dons de telepathie s'améliore jajaja, voici le code
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/general.css"/>
<link rel="stylesheet" type="text/css" href="css/texte.css"/>
<link rel="stylesheet" type="text/css" href="css/pied.css"/>
<link rel="stylesheet" type="text/css" href="css/modal.css"/>
<link rel="stylesheet" type="text/css" href="css/menu.css"/>
<link rel="stylesheet" type="text/css" href="css/entete.css"/>
<link rel="stylesheet" type="text/css" href="css/vide.css"/>
<link rel="stylesheet" type="text/css" href="css/image.css"/>
<link rel="stylesheet" type="text/css" href="css/menu_reiki.css"/>
<link rel="stylesheet" type="text/css" href="css/temoin.css"/>
<script type="text/javascript" src="turn/turnjs4/extras/jquery.min.1.7.1.js"></script>
<script type="text/javascript" src="turn/turnjs4/extras/jquery.min.1.7.js"></script>
<script type="text/javascript" src="turn/turnjs4/lib/turn.js"></script>
<style type="text/css">
#livre{
top: 150px;
margin-left:50%;
}
#col_livre{
justify-content: center;
display: grid;
grid-template-columns: 35%;
}
#livre,
.livre-wrapper {
transform-origin: 0% 0% 0px;
}
#livre .turn-page {
background-image: url('paper-texture.png');
background-repeat: repeat;
}
.page-wrapper>.page {
height: 800px;
width: 600px;
transform-origin: 0% 0% 0px;
}
.flip-control {
width: 400px;
text-align: center;
position: absolute;
top:150px;
}
.flip-control a {
margin-left: 10px;
}
</style>
</head>
<body>
<div id="col_livre">
<div class="livre-wrapper">
<div id="livre">
<div class="page-wrapper">
<div class="page" style="background-color:yellow;"></div>
</div>
<div class="page-wrapper">
<div class="page" style="background-color:brown;">mesage sdmfhdf kldfjh dfjklh dfjklh aldh kl dfjhg kldfh ld lsdf lsdfjkh lkdf df hdfklgh klsdfh lfgh df f lsdfjkmesage de sdmfhdf kldfjh dfjklh dfjklh aldh kl dfjhg kldfh ld lsdf lsdfjkh lkdf df hdfklgh klsdfh lfgh df f lsdfjkmesage de sdmfhdf kldfjh dfjklh dfjklh aldh kl dfjhg kldfh ld lsdf lsdfjkh lkdf df hdfklgh klsdfh lfgh df f lsdfjk
<img src="image/logo-main-1.gif" id="img-logo" > </div>
</div>
<div class="page-wrapper">
<div class="page" style="background-color:red;"><H1> EST UN TEST</H1> </div>
</div>
<div class="page-wrapper">
<div class="page" style="background-color:green;"> test</div>
</div>
<div class="page-wrapper">
<div class="page" style="background-color:orange;" > <H1> UN AUTRE TEST</H1></div>
</div>
<div class="page-wrapper">
<div class="page" style="background-color:blue;"> FGHSKFDHG LFDFILH SGH</div>
</div>
<div class="page-wrapper">
<div class="page" style="background-image:url(image/main-gauche.gif);"></div>
</div>
</div>
</div>
<div class="flip-control">
<a href="#" id="precedent"> <h1>Previous</h1> </a>
<a href="#" id="suivant"><h1>Next </h1></a>
</div>
</div>
<script type="text/javascript">
$(window).ready(function() {
var $page = $('.page-wrapper>.page');
var $livreWrapper = $('.livre-wrapper');
var $pageWrapper = $('.page-wrapper');
var $livre = $('#livre');
var height = $page.height();
var width = $page.width();
$page.css('transform', `translate3d(0px, ${width}px, 0px) rotate(-90deg)`);
$livreWrapper.height(width);
$livreWrapper.width(height);
$livreWrapper.css('transform', `translate3d(${width}px, 0px, 0px) rotate(90deg)`)
$pageWrapper.height(width);
$pageWrapper.width(height);
$livre.height(width);
$livre.width(height);
$livre.turn({
display: 'single',
acceleration: true,
gradients: false,
gradients: !$.isTouch,
elevation: 50,
when: {
turned: function(e, page) {
/*console.log('Current view: ', $(this).turn('view'));*/
}
}
});
});
//fonction pour les boutons
var num_pages = $("#flipbook").turn("page");
$("#precedent").mousedown(function(){
var page = $("#flipbook").turn("page");
if(page == 2 || page == 3 || page == num_pages){
$("#flipbook").turn("peel", "l");
}
else{
$("#flipbook").turn("peel", "tl");
}
}).mouseup(function(){
$("#flipbook").turn("prev");
});
$("#suivant").mousedown(function(){
var page = $("#flipbook").turn("page");
if(page == 1 || page == num_pages - 2 || page == num_pages - 1){
$("#flipbook").turn("peel", "r");
}
else{
$("#flipbook").turn("peel", "tr");
}
}).mouseup(function(){
$("#flipbook").turn("next");
});
</script>
</body>
</html>
Dans la console j'ai:
La mise en page a été forcée avant le chargement complet de la page. Si les feuilles de style ne sont pas encore chargées, cela peut provoquer un flash de contenu sans style. jquery.min.1.7.js:2:19234
TypeError: data is null turn.js:1311:7
page http://energievive/lev-3/turn/turnjs4/lib/turn.js:1311
dec http://energievive/lev-3/turn/turnjs4/lib/turn.js:3011
turn http://energievive/lev-3/turn/turnjs4/lib/turn.js:3264
<anonymous> http://energievive/lev-3/test.php#:149
Et voici le lien ou tu peux voir le résultat
https://lenergie-vive.com/livre/test.php
La page se tourne en passant la souri sur le livre et en cliquant quand le coin du livre se leve.
Peux tu me diriger pour corriger cette erreur?
26 sept. 2022 à 09:26
Pour commencer, pourquoi n'y a t'il qu'une partie du code JS qui se trouve dans le
$(window).ready(function() {
Sais tu ce qu'est la "portée" des variables et comment ça fonctionne ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question26 sept. 2022 à 12:16
Mes connaisances en JS sont presque nulles. Je suppose que les variables fonctoinnent a l'identique que d'autre langage: doivent être déclarée avant toutes utilisation et peuvent servir dans tout ton site ou la page suivant la position de la variable,
J'ai copié le code depuis cette adresse https://stackoverflow.com/questions/30867378/vertical-flipping-using-turn-js
Et ce code fonctionne bien pour le deplacement des pages avec la souris mais avec les boutons cela ne fonctionne pas.
26 sept. 2022 à 12:17
Tu te souviens que je t'avais donné un lien avec un exemple d'utilisation des boutons ??
Salut,
"Je suppose que les variables fonctionnent a l'identique que d'autre langage: doivent être déclarée avant toutes utilisation et peuvent servir dans tout ton site ou la page suivant la position de la variable,"
Non JavaScript à des particularités que d'autres langages n'ont pas. Ce n'est pas une question de avant ou après mais de portée de la variable. Une variable existe dans son propre contexte uniquement(donc absolument pas dans tout une page et encore moins dans tout un site qui comprends plusieurs pages et n'a que peu de relations avec sa position), celui ci peut-être une fonction, un objet ou autre contexte mais ce n'est pas une question de position(et encore moins d'ordre dans un cadre qui peut ne pas être procédural; procédural signifiant une suite d'instructions ordonnées JS fonctionne souvent autrement, par exemple dans le cas d'événements reliés à une action de l'utilisateur c'est l'événement qui indique une 'action' et non l''ordre des lignes de codes: programmation événementielle = liée à un événement déclencheur par exemple le chargement complet de la page ou le clic de l'utilisateur sur un élément de la page) mais de portée(ou scope en anglais). Le contexte du JavaScript étant du plus général(la page HTML auquel il est lié et uniquement après chargement de celle ci dans le navigateur-après HTML et CSS pour JavaScript) au contexte le plus particulier = une variable crée à l'intérieur d'une fonction n'existe que dans la fonction. Voir aussi ce qu'est la temporal dead zone(TdZ) qui signifie que hors du temps d'utilisation d'une variable celle ci n'existe pas. Juste pour être précis et rectifier une supposition qui est fausse....il ne sert à rien de supposer quand on parle de techniques/technologies il vaut mieux savoir/apprendre.
"La mise en page a été forcée avant le chargement complet de la page. Si les feuilles de style ne sont pas encore chargées, cela peut provoquer un flash de contenu sans style. jquery.min.1.7.js:2:19234
"
Ou en gros le programme se déclenche avant que la page soit entièrement chargée et donc un programme qui agit sur la page qui n'existe pas encore ...bin ça ne peut tout simplement fonctionner.
Solution : faire démarrer le programme UNIQUEMENT quand la page est correctement chargée. EN JQuery $document.ready(){... est donc le contexte qui permet cela(ou la portée des variables seront utilisables uniquement quand le document est prêt à être utilisé).
En pur JS c'est l'équivalent (sans objet) de document.ready=function(){...
26 sept. 2022 à 13:15
Oui parfaiteemmnt.
Cela fontionne très bien dans l'exemple, mais dans ma page non.
J'avais enlever cette partie de code
$("#flipbook").turn({
width: 400,
height: 300
});
J'ai remis le code complet original pour voir et c'est pareil.
26 sept. 2022 à 14:10
Tu as respecté le code javascript ET html ?
Les mêmes noms de class ? les mêmes id ?
Tu as vidé le cache du navigateur ?
Tu as toujours une erreur dans la console ?
26 sept. 2022 à 15:42
Tu as respecté le code javascript ET html ? ==> oui script original
Les mêmes noms de class ? les mêmes id ? ==> oui script original
Tu as vidé le cache du navigateur ? ==> oui cache cookies et navigation
Tu as toujours une erreur dans la console ? ==> non aucune erreur.
Le flip de la page avec souris fonctionne mais pas avec le bouton. Surement que je ne fais pas bien les choses avec les bouton, mais comme je n'y connait rien en JS, je nage...
Voici le code avec les boutons. Peux tu le mdifier pour que cela fonctionne?
<!doctype html>
<html>
<head>
<script type="text/javascript" src="turn/turnjs4/extras/jquery.min.1.7.1.js"></script>
<script type="text/javascript" src="turn/turnjs4/extras/jquery.min.1.7.js"></script>
<script type="text/javascript" src="turn/turnjs4/lib/turn.js"></script>
<style type="text/css">
#calendar,
.calendar-wrapper {
transform-origin: 0% 0% 0px;
}
#calendar .turn-page {
background-image: url('paper-texture.png');
background-repeat: repeat;
}
.page-wrapper>.page {
height: 800px;
width: 600px;
transform-origin: 0% 0% 0px;
}
.flip-control {
width: 400px;
text-align: center;
position: absolute;
top:150px;
right: 50%;
}
.flip-control a {
margin-left: 10px;
}
</style>
</style>
</head>
<body>
<div>
<div class="calendar-wrapper">
<div id="calendar">
<div class="page-wrapper">
<div class="page" style="background-color:yellow;"></div>
</div>
<div class="page-wrapper">
<div class="page" style="background--color:black;"></div>
</div>
<div class="page-wrapper">
<div class="page" style="background-color:red;"></div>
</div>
<div class="page-wrapper">
<div class="page" style="background-color:green;"></div>
</div>
</div>
</div>
<div class="flip-control">
<a href="#" id="previous"> <h1>Previous</h1> </a>
<a href="#" id="next"><h1>Next </h1></a>
</div>
</div>
<script type="text/javascript">
$(window).ready(function()
{
var $page = $('.page-wrapper>.page');
var $calendarWrapper = $('.calendar-wrapper');
var $pageWrapper = $('.page-wrapper');
var $calendar = $('#calendar');
var height = $page.height();
var width = $page.width();
$page.css('transform', `translate3d(0px, ${width}px, 0px) rotate(-90deg)`);
$calendarWrapper.height(width);
$calendarWrapper.width(height);
$calendarWrapper.css('transform', `translate3d(${width}px, 0px, 0px) rotate(90deg)`)
$pageWrapper.height(width);
$pageWrapper.width(height);
$calendar.height(width);
$calendar.width(height);
$calendar.turn(
{
display: 'single',
acceleration: true,
gradients: false,
gradients: !$.isTouch,
elevation: 50,
when:
{
turned: function(e, page)
{
/*console.log('Current view: ', $(this).turn('view'));*/
}
}
});
//fonction pour les boutons
$("#flipbook").turn({
width: 400,
height: 300
});
var num_pages = $("#flipbook").turn("pages");
$("#previous").mousedown(function()
{
var page = $("#flipbook").turn("page");
if(page == 2 || page == 3 || page == num_pages)
{
$("#flipbook").turn("peel", "l");
}
else
{
$("#flipbook").turn("peel", "tl");
}
}).mouseup(function()
{
$("#flipbook").turn("previous");
});
$("#next").mousedown(function(){
var page = $("#flipbook").turn("page");
if(page == 1 || page == num_pages - 2 || page == num_pages - 1){
$("#flipbook").turn("peel", "r");
}
else{
$("#flipbook").turn("peel", "tr");
}
}).mouseup(function(){
$("#flipbook").turn("next");
});
});
</script>
</body>
</html>
Merci pour ton aide
29 sept. 2022 à 07:30
Voici le code qui fonctonne, au cas ou cela pourrait interesser un autre menbre.
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/general.css"/>
<link rel="stylesheet" type="text/css" href="css/texte.css"/>
<link rel="stylesheet" type="text/css" href="css/pied.css"/>
<link rel="stylesheet" type="text/css" href="css/modal.css"/>
<link rel="stylesheet" type="text/css" href="css/menu.css"/>
<link rel="stylesheet" type="text/css" href="css/entete.css"/>
<link rel="stylesheet" type="text/css" href="css/vide.css"/>
<link rel="stylesheet" type="text/css" href="css/image.css"/>
<link rel="stylesheet" type="text/css" href="css/menu_reiki.css"/>
<link rel="stylesheet" type="text/css" href="css/temoin.css"/>
<link rel="stylesheet" type="text/css" href="css/pageflip.css" media="screen" />
<style type="text/css" src="js/messages.js"> </style>
<script type="text/javascript" src="turn/turnjs4/extras/jquery.min.1.7.1.js"></script>
<script type="text/javascript" src="turn/turnjs4/extras/jquery.min.1.7.js"></script>
<script type="text/javascript" src="turn/turnjs4/lib/turn.js"></script>
<style type="text/css">
#col_book{
justify-content: center;
display: grid;
grid-template-columns: 35%;
}
#flipbook,
.flipbook-wrapper {
transform-origin: 0% 0% 0px;
margin-left: 15%;
}
#flipbook .turn-page {
background-image: url('image/ame.png');
background-repeat: repeat;
}
.page-wrapper>.page {
height: 600px;
width: 100%;
transform-origin: 0% 0% 0px;
background-color:cyan;
text-align: center;
}
.flip-control {
width: 400px;
text-align: center;
position: absolute;
bottom:150px;
right: 50%;
}
.flip-control a {
margin-left: 10px;
}
</style>
</head>
<body>
<div class="flip-control" >
<a href="#" id="prev"> Previous </a>
<a href="#" id="next">Next </a>
</div>
<div id="col_book">
<div class="flipbook-wrapper">
<div id="flipbook">
<div class="page-wrapper">
<div class="page" >
<div id="texte-temoin">
<table width= "100%" height="100%">
<tr>
<td colspan="2">
<textearea <p>qeew sdhfa ksjhdskfkds dfkfjhljkhkldfjh ddkfhgklfgh sdljkghkdfgh l qeew sdhfa ksjhdskfkds dfkfjhljkhkldfjh ddkfhgklfgh sdljkghkdfgh lqeew sdhfa ksjhdskfkds dfkfjhljkhkldfjh ddkfhgklfgh sdljkghkdfgh lqeew sdhfa ksjhdskfkds dfkfjhljkhkldfjh ddkfhgklfgh sdljkghkdfgh lqeew sdhfa ksjhdskfkds dfkfjhljkhkldfjh ddkfhgklfgh sdljkghkdfgh lqeew sdhfa ksjhdskfkds dfkfjhljkhkldfjh ddkfhgklfgh sdljkghkdfgh lqeew sdhfa ksjhdskfkds dfkfjhljkhkldfjh ddkfhgklfgh sdljkghkdfgh lqeew sdhfa ksjhdskfkds dfkfjhljkhkldfjh ddkfhgklfgh sdljkghkdfgh lqeew sdhfa ksjhdskfkds dfkfjhljkhkldfjh ddkfhgklfgh sdljkghkdfgh lqeew sdhfa ksjhdskfkds dfkfjhljkhkldfjh ddkfhgklfgh sdljkghkdfgh lqeew sdhfa ksjhdskfkds dfkfjhljkhkldfjh ddkfhgklfgh sdljkghkdfgh lqeew sdhfa ksjhdskfkds dfkfjhljkhkldfjh ddkfhgklfgh sdljkghkdfgh lqeew sdhfa ksjhdskfkds dfkfjhljkhkldfjh ddkfhgklfgh sdljkghkdfgh l </p>
</td>
</tr>
<tr>
<td width= "80%" height="15%">
<p><center><b>qwe yo</b> <br>qwee - France - 04/06/2022<br /></center></p>
</td>
</tr>
</table>
</div>
<div id="texte-temoin">
<img height= "100%" src=../lev/image/logo-2.gif>
</div>
</div>
</div>
<div class="page-wrapper">
<div class="page"><h1 >L ENERGIE VIVE <BR>PAGE 2</h1><BR><img width="50%" src="image/logo-2.gif" id="img-logo-bas"/>
</div>
</div>
<div class="page-wrapper">
<div class="page" ><h1 >L ENERGIE VIVE <BR>PAGE 3</h1><BR><img width="50%" src="image/logo-2.gif" id="img-logo-bas"/></div>
</div>
<div class="page-wrapper">
<div class="page" ><h1 >L ENERGIE VIVE <BR>PAGE 4</h1></div>
</div>
<div class="page-wrapper">
<div class="page" ><h1 >L ENERGIE VIVE <BR>PAGE 5</h1></div>
</div>
<div class="page-wrapper">
<div class="page" ><h1 >L ENERGIE VIVE <BR>PAGE 6</h1></div>
</div>
<div class="page-wrapper">
<div class="page" ><h1 >L ENERGIE VIVE <BR>PAGE 7</h1></div>
</div>
<div class="page-wrapper">
<div class="page" ><h1 >L ENERGIE VIVE<BR> PAGE 8</h1></div>
</div>
</div>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script type="text/javascript">
$(window).ready(function()
{
//$("#flipbook").turn({
// width: 600,
// height: 800
//});
var $page = $('.page-wrapper>.page');
var $flipbookWrapper = $('.flipbook-wrapper');
var $pageWrapper = $('.page-wrapper');
var $flipbook = $('#flipbook');
var height = $page.height();
var width = $page.width();
$page.css('transform', `translate3d(0px, ${width}px, 0px) rotate(-90deg)`);
$flipbookWrapper.height(width);
$flipbookWrapper.width(height);
$flipbookWrapper.css('transform', `translate3d(${width}px, 0px, 0px) rotate(90deg)`)
$pageWrapper.height(width);
$pageWrapper.width(height);
$flipbook.height(width);
$flipbook.width(height);
$flipbook.turn(
{
display: 'single',
acceleration: true,
gradients: false,
gradients: !$.isTouch,
elevation: 50,
when:
{
turned: function(e, page)
{
/*console.log('Current view: ', $(this).turn('view'));*/
}
}
});
//fonction pour les boutons
var num_page = $("#flipbook").turn("page");
$("#prev").mousedown(function()
{
var page = $("#flipbook").turn("page");
if(page == 2 || page == 3 || page == num_pages)
{
$("#flipbook").turn("peel", "l");
}
else
{
$("#flipbook").turn("peel", "tl");
}
}).mouseup(function()
{
$("#flipbook").turn("previous");
});
$("#next").mousedown(function(){
var page = $("#flipbook").turn("page");
if(page == 1 || page == num_pages - 2 || page == num_pages - 1){
$("#flipbook").turn("peel", "r");
}
else{
$("#flipbook").turn("peel", "tr");
}
}).mouseup(function(){
$("#flipbook").turn("next");
});
});
</script>
</body>
</html>
Merci pour votre aide précieuse.
