code pageflip

4 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu code pageflip

Message par chipie23 Jeu 6 Jan 2011 - 21:36

Bonsoir, depuis quelques temps je cherche à créer un livre avec effet pageflip et j'ai trouver ce site en anglais qui correspond exactement à ce que je recherche malheureusement je ne comprend pas grand chose à ce qu'il raconte pour le code donc si quelqu'un peut m'expliquer. Rolling Eyes


Dernière édition par chipie23 le Jeu 20 Jan 2011 - 3:54, édité 3 fois
chipie23

chipie23
***

Féminin
Messages : 187
Inscrit(e) le : 30/06/2010

chipie23 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pageflip

Message par chipie23 Sam 8 Jan 2011 - 11:34

UP Razz
chipie23

chipie23
***

Féminin
Messages : 187
Inscrit(e) le : 30/06/2010

chipie23 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pageflip

Message par chipie23 Dim 9 Jan 2011 - 12:22

UP What's happen ?!?
chipie23

chipie23
***

Féminin
Messages : 187
Inscrit(e) le : 30/06/2010

chipie23 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pageflip

Message par Neptunia Dim 9 Jan 2011 - 13:01

Bonjour !


Comprenez vous mieux sur cette page ?

Ou est ce le code en lui même qui vous pose souci ?
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17853
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pageflip

Message par chipie23 Lun 10 Jan 2011 - 15:28

Bonjour, merci de votre réponse mais effectivement c'est le code en lui-même qui me pose des problèmes
chipie23

chipie23
***

Féminin
Messages : 187
Inscrit(e) le : 30/06/2010

chipie23 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pageflip

Message par chipie23 Mar 11 Jan 2011 - 16:46

UP UP UP Cool
chipie23

chipie23
***

Féminin
Messages : 187
Inscrit(e) le : 30/06/2010

chipie23 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: code pageflip

Message par Lunathiel Mar 11 Jan 2011 - 23:00

Je ne comprends absolument rien à ce code mais j'ai trouvé ce petit site
bien sympathique

=> http://www.flipzee.com/report.php

qui permet de faire des livres en page flip... Et facilement importable sur un post dans ton forum...

je l'ai utilisé pour faire le livre sur cette page http://legendsecondarc.forumactif.org/t521-decembre-2010-le-livre-enigmatique-en-collaboration-avec-patrick-sobral

Cordialement
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pageflip

Message par chipie23 Mer 12 Jan 2011 - 12:50

Bonjour et merci beaucoup de ta réponse mais je connait plein de site dans ce style dont celui la mais ce n'est pas ce que je recherche donc si quelqu'un peut m'expliquer les codes de ce site cela m'arrangerais

Merci à ceux qui me répondrons
chipie23

chipie23
***

Féminin
Messages : 187
Inscrit(e) le : 30/06/2010

chipie23 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pageflip

Message par Neptunia Mer 12 Jan 2011 - 17:00

Bonjour !


Où souhaitez vous placer votre livre ?
Dans le corps d'un message ou sur la page d'accueil ?
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17853
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pageflip

Message par chipie23 Mer 12 Jan 2011 - 20:03

Dans une page html
chipie23

chipie23
***

Féminin
Messages : 187
Inscrit(e) le : 30/06/2010

chipie23 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pageflip

Message par Adam_sfp Jeu 13 Jan 2011 - 0:13

bonsoir

Pour une page HTML

Vous pouvez essayer ce code
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      
          
      
      <script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/37821634957680146/jquery-142.js"></script>
      <script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/37821634957680146/jqueryimBookFlip-06.js"></script>

      <style>

#myBook {
   display:none;
   position:absolute;
   left: 400px;
   top:270px;
   width: 604px;
   height:362px;
}
.imBookPage {
   position:absolute;
   left:0px;
   top:0px;
   width: 300px;
   height:360px;
   color:#fff;
   overflow:hidden;
   border: solid 1px #000;
}
</style>
<script type="text/javascript">
$(document).ready( function() {
   $("#myBook").imBookFlip({
      page_class: 'imBookPage'
   });
});   


</script>   
   </head>
   <body>
   <div id="myBook" style="display:none;">         
   <div class="imBookPage" style="background: url(http://sd-1.archive-host.com/membres/up/37821634957680146/stargate.jpg")></div>
   <div class="imBookPage" style="background: url(http://sd-1.archive-host.com/membres/up/37821634957680146/stargate.jpg")></div>
   <div class="imBookPage" style="background: url(http://sd-1.archive-host.com/membres/up/37821634957680146/stargate.jpg")></div>
   <div class="imBookPage" style="background: url(http://sd-1.archive-host.com/membres/up/37821634957680146/stargate.jpg")></div>
   <div class="imBookPage" style="background: url(http://sd-1.archive-host.com/membres/up/37821634957680146/stargate.jpg")></div>
   
</div>   
   
   </body>
</html>

une ligne comme ceci correspond à une image

Code:
div class="imBookPage" style="background: url(http://sd-1.archive-host.com/membres/up/37821634957680146/stargate.jpg")></div>

Vous pouvez donc en rajouter à la suite en mettant bien sur l'url de vos images

Cordialement.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pageflip

Message par Neptunia Jeu 13 Jan 2011 - 0:45

Bonsoir Adam_sfp !


Et merci pour l'explication.
Pour ma part j'avais bien compris que le mode par défaut avait l'inconvénient d'utiliser des positions absolues.
J'ai réussi à l'installer sur une page d'accueil ...
... en dehors du cadre d'accueil

Par contre je n'ai strictement rien compris au code à la méthode par iframe.

Quel serait le code à employer pour le faire fonctionner sous forme d'iframe dans le message page accueil ou dans un post ?
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17853
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pageflip

Message par Adam_sfp Jeu 13 Jan 2011 - 10:17

Bonjour

Apparemment pour l'iframe (et si j'ai bien compris Wink )il faut un hébergement acceptant le PHP.

pour le CSS

Code:
.imBookPage {
   position:absolute;
   left:0px;
   top:0px;
   width: 300px;
   height:360px;
   color:#fff;
   overflow:hidden;
   border: solid 1px #000;
}
 
#iframeCntnr {
   width:604px;
   height:362px;
   padding:0;
   float:left;
}

Mettre à ce moment la ce script
Code:
<script type="text/javascript">
   $(document).ready( function() {
      $("#iframeCntnr").imBookFlip({
         page_class: 'imBookPage',
         iframe: {src: 'ADRESSE DE VOTRE PAGE PHP', book: 'myBook'}
      });
   });   

</script>
et ce code pour la page PHP
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <title>imBookFlip</title>
      <style>
      .imBookPage {
         position:absolute;
         left:0px;
         top:0px;
         width: 300px;
         height:360px;
         color:#fff;
         overflow:hidden;
         border: solid 1px #000;
      }
      </style>
   </head>
   <body>
  <div id="myBook" style="display:none;">       
  <div class="imBookPage" style="background: url(http://sd-1.archive-host.com/membres/up/37821634957680146/stargate.jpg")></div>
  <div class="imBookPage" style="background: url(http://sd-1.archive-host.com/membres/up/37821634957680146/stargate.jpg")></div>
  <div class="imBookPage" style="background: url(http://sd-1.archive-host.com/membres/up/37821634957680146/stargate.jpg")></div>
  <div class="imBookPage" style="background: url(http://sd-1.archive-host.com/membres/up/37821634957680146/stargate.jpg")></div>
  <div class="imBookPage" style="background: url(http://sd-1.archive-host.com/membres/up/37821634957680146/stargate.jpg")></div>
 
</div>
   </body>
</html>


Cordialement.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pageflip

Message par chipie23 Jeu 13 Jan 2011 - 19:51

Bonjour,
merci de m'avoir répondu, je viens de tester le code qui marche bien mais je n'arrive pas à changer la taille du livre et j'ai remarquer que l'on ne peut pas le refermer
chipie23

chipie23
***

Féminin
Messages : 187
Inscrit(e) le : 30/06/2010

chipie23 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pageflip

Message par Adam_sfp Jeu 13 Jan 2011 - 20:15

Bonsoir

La taille du livre est fonction de la taille des images
en fonction de la taille de celle ci il faut changer les valeurs de width et height du code.


Cordialement.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pageflip

Message par Neptunia Jeu 13 Jan 2011 - 20:18

Bonsoir !

Pour la taille du livre :
J'imagine qu'il suffit de modifier les lignes en orange et en rouge dans le code ci dessous pour l'adapter à la taille de tes images.
<style>

#myBook {
display:none;
position:absolute;
left: 400px;
top:270px;
width: 604px;
height:362px;

}
.imBookPage {
position:absolute;
left:0px;
top:0px;
width: 300px;
height:360px;

color:#fff;
overflow:hidden;
border: solid 1px #000;
}
</style>
En rouge, tu met la taille de tes images, et en orange :
- height = Hauteur image + 2
- Width = Largeur image * 2 + 4
Le +2 correspondant à ta bordure haute et basse de 1 pixel (Propriété border:) sur chaque image
Le +4 à ta bordure gauche et droite de 1 pixel pour l'addition des deux images (livre ouvert)
Et pour finir le *2 parce que le livre affiche 2 images lorsqu'il est ouvert.
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17853
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pageflip

Message par chipie23 Jeu 13 Jan 2011 - 20:39

D'accord, je vais tester tout ca
et pour la 4eme de couverture comment la mettre ?
chipie23

chipie23
***

Féminin
Messages : 187
Inscrit(e) le : 30/06/2010

chipie23 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pageflip

Message par Neptunia Jeu 13 Jan 2011 - 20:47

Si j'ai bien compris il te faudra un nombre pair d'images.
Si tu as un nombre impair la première sera la 1ere de couverture et il est possible que ce soit à cause d'un nombre impair de pages que le livre ne se referme pas.
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17853
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pageflip

Message par chipie23 Jeu 13 Jan 2011 - 21:45

ok je vais essayer
chipie23

chipie23
***

Féminin
Messages : 187
Inscrit(e) le : 30/06/2010

chipie23 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pageflip

Message par chipie23 Mer 19 Jan 2011 - 17:38

Je rencontre un gros problème, j'ai changer les images et plus rien ne s'affiche
comment faire j'ai mis les dimensions de l'image mais ce ne change rien
chipie23

chipie23
***

Féminin
Messages : 187
Inscrit(e) le : 30/06/2010

chipie23 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pageflip

Message par Adam_sfp Mer 19 Jan 2011 - 17:50

Bonjour

il faudrait le code pour voir le soucis...

Cordialement.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pageflip

Message par chipie23 Mer 19 Jan 2011 - 21:50

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
          <link rel="shortcut icon" href="http://www.patmax.eu/I1/101125005334.png" />
         
     
      <script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/37821634957680146/jquery-142.js"></script>
      <script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/37821634957680146/jqueryimBookFlip-06.js"></script>

      <style>

body {
    cursor: url('http://www.patmax.eu/C1/101125001342.cur'),auto;
    background-color: #A0A0A0;
      background-image: url("http://www.patmax.eu/I1/110104194124.png");
}

#myBook {
  display:none;
  position:absolute;
  left: 0px;
  top:0px;
  width: 500px;
  height:612px;
}
.imBookPage {
  position:absolute;
  left:0px;
  top:0px;
  width: 500px;
  height:612px;
  color:#fff;
  overflow:hidden;
  border: solid 1px #000;
}
</style>
<script type="text/javascript">
$(document).ready( function() {
  $("#myBook").imBookFlip({
      page_class: 'imBookPage'
  });
}); 


</script> 
  </head>
  <body>
  <div id="myBook" style="display:none;">       
  <div class="imBookPage" style="background: url("http://www.patmax.eu/I1/110119173333.png")></div>
  <div class="imBookPage" style="background: url("http://www.patmax.eu/I1/110119173333.png")></div>
  <div class="imBookPage" style="background: url("http://www.patmax.eu/I1/110119173333.png")></div>
  <div class="imBookPage" style="background: url("http://www.patmax.eu/I1/110119173333.png")></div>
  <div class="imBookPage" style="background: url("http://www.patmax.eu/I1/110119173333.png")></div>
  <div class="imBookPage" style="background: url("http://www.patmax.eu/I1/110119173333.png")></div>
 
</div> 
 
  </body>
</html>
chipie23

chipie23
***

Féminin
Messages : 187
Inscrit(e) le : 30/06/2010

chipie23 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pageflip

Message par Adam_sfp Mer 19 Jan 2011 - 23:59

Bonsoir

2 petites erreurs dans le code au niveau des tailles dans le css et le signe " en trop au début de l'url..

Cela devrait être bon.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
      <head>
              <link rel="shortcut icon" href="http://www.patmax.eu/I1/101125005334.png" />
           
       
          <script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/37821634957680146/jquery-142.js"></script>
          <script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/37821634957680146/jqueryimBookFlip-06.js"></script>

          <style>

    body {
        cursor: url('http://www.patmax.eu/C1/101125001342.cur'),auto;
        background-color: #A0A0A0;
          background-image: url("http://www.patmax.eu/I1/110104194124.png");
    }

    #myBook {
      display:none;
      position:absolute;
      left: 140px;
      top:170px;
      width: 1004px;
      height:614px;
    }
    .imBookPage {
      position:absolute;
      left:0px;
      top:0px;
      width: 500px;
      height:612px;
      color:#fff;
      overflow:hidden;
      border: solid 1px #000;
    }
    </style>
    <script type="text/javascript">
    $(document).ready( function() {
      $("#myBook").imBookFlip({
          page_class: 'imBookPage'
      });
    });


    </script>
      </head>
      <body>
      <div id="myBook" style="display:none;">     
      <div class="imBookPage" style="background: url(http://www.patmax.eu/I1/110119173333.png")></div>
      <div class="imBookPage" style="background: url(http://www.patmax.eu/I1/110119173333.png")></div>
      <div class="imBookPage" style="background: url(http://www.patmax.eu/I1/110119173333.png")></div>
      <div class="imBookPage" style="background: url(http://www.patmax.eu/I1/110119173333.png")></div>
      <div class="imBookPage" style="background: url(http://www.patmax.eu/I1/110119173333.png")></div>
      <div class="imBookPage" style="background: url(http://www.patmax.eu/I1/110119173333.png")></div>
   
    </div>
   
      </body>
    </html>

Cordialement.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pageflip

Message par chipie23 Jeu 20 Jan 2011 - 3:53

Merci beaucoup cela fonctionne, en fait je n'avait pas compris l'histoire de taille mais maintenant c'est bon Very Happy
chipie23

chipie23
***

Féminin
Messages : 187
Inscrit(e) le : 30/06/2010

chipie23 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum