code pageflip

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

Résolu code pageflip

Message par chipie23 le 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
***

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 le Sam 8 Jan 2011 - 11:34

UP Razz

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 le Dim 9 Jan 2011 - 12:22

UP What's happen ?!?

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 le 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
+ Hyperactif +

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

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pageflip

Message par chipie23 le 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
***

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 le Mar 11 Jan 2011 - 16:46

UP UP UP Cool

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 le 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
****

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 le 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
***

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 le 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
+ Hyperactif +

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

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pageflip

Message par chipie23 le Mer 12 Jan 2011 - 20:03

Dans une page html

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 le 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
+ Hyperactif +

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

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pageflip

Message par Neptunia le 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
+ Hyperactif +

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

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pageflip

Message par Adam_sfp le 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
+ Hyperactif +

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

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pageflip

Message par chipie23 le 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
***

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 le 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
+ Hyperactif +

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

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pageflip

Message par Neptunia le 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
+ Hyperactif +

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

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pageflip

Message par chipie23 le Jeu 13 Jan 2011 - 20:39

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

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 le 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
+ Hyperactif +

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

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pageflip

Message par chipie23 le Jeu 13 Jan 2011 - 21:45

ok je vais essayer

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 le 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
***

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 le Mer 19 Jan 2011 - 17:50

Bonjour

il faudrait le code pour voir le soucis...

Cordialement.

Adam_sfp
+ Hyperactif +

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

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pageflip

Message par chipie23 le 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
***

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 le 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
+ Hyperactif +

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

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pageflip

Message par chipie23 le 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
***

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


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