code pageflip
4 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
code pageflip
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.
Dernière édition par chipie23 le Jeu 20 Jan 2011, 03:54, édité 3 fois
chipie23- ***
-
Messages : 187
Inscrit(e) le : 30/06/2010
chipie23- ***
-
Messages : 187
Inscrit(e) le : 30/06/2010
chipie23- ***
-
Messages : 187
Inscrit(e) le : 30/06/2010
Re: code pageflip
Bonjour, merci de votre réponse mais effectivement c'est le code en lui-même qui me pose des problèmes
chipie23- ***
-
Messages : 187
Inscrit(e) le : 30/06/2010
Re: code pageflip
UP UP UP
chipie23- ***
-
Messages : 187
Inscrit(e) le : 30/06/2010
Re: code pageflip
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
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
Re: code pageflip
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
Merci à ceux qui me répondrons
chipie23- ***
-
Messages : 187
Inscrit(e) le : 30/06/2010
Re: code pageflip
Bonjour !
Où souhaitez vous placer votre livre ?
Dans le corps d'un message ou sur la page d'accueil ?
Où souhaitez vous placer votre livre ?
Dans le corps d'un message ou sur la page d'accueil ?
Re: code pageflip
Dans une page html
chipie23- ***
-
Messages : 187
Inscrit(e) le : 30/06/2010
Re: code pageflip
bonsoir
Pour une page HTML
Vous pouvez essayer ce code
une ligne comme ceci correspond à une image
Vous pouvez donc en rajouter à la suite en mettant bien sur l'url de vos images
Cordialement.
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.
Re: code pageflip
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 ?
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 ?
Re: code pageflip
Bonjour
Apparemment pour l'iframe (et si j'ai bien compris )il faut un hébergement acceptant le PHP.
pour le CSS
Mettre à ce moment la ce script
Cordialement.
Apparemment pour l'iframe (et si j'ai bien compris )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>
- 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.
Re: code pageflip
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
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- ***
-
Messages : 187
Inscrit(e) le : 30/06/2010
Re: code pageflip
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.
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.
Re: code pageflip
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.
- 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.
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.
En rouge, tu met la taille de tes images, et en orange :<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>
- 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.
Re: code pageflip
D'accord, je vais tester tout ca
et pour la 4eme de couverture comment la mettre ?
et pour la 4eme de couverture comment la mettre ?
chipie23- ***
-
Messages : 187
Inscrit(e) le : 30/06/2010
Re: code pageflip
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.
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.
Re: code pageflip
ok je vais essayer
chipie23- ***
-
Messages : 187
Inscrit(e) le : 30/06/2010
Re: code pageflip
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
comment faire j'ai mis les dimensions de l'image mais ce ne change rien
chipie23- ***
-
Messages : 187
Inscrit(e) le : 30/06/2010
Re: code pageflip
Bonjour
il faudrait le code pour voir le soucis...
Cordialement.
il faudrait le code pour voir le soucis...
Cordialement.
Re: code pageflip
- 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- ***
-
Messages : 187
Inscrit(e) le : 30/06/2010
Re: code pageflip
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.
Cordialement.
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.
Re: code pageflip
Merci beaucoup cela fonctionne, en fait je n'avait pas compris l'histoire de taille mais maintenant c'est bon
chipie23- ***
-
Messages : 187
Inscrit(e) le : 30/06/2010
Sujets similaires
» Balise [code] [/code] : Avoir le texte « code » et « sélectionner le contenu » en bleu, plus gros ainsi qu’avoir la même couleur
» La fenêtre ou le code doit apparaître est sur fond blanc et mon code aussi.
» Modifié l'affichage utilisant les balises BBCODE [code][/code]
» Incorporer un autre code dans le code du message accodéon
» Le code popup s'installe dans le code source comment faire svp
» La fenêtre ou le code doit apparaître est sur fond blanc et mon code aussi.
» Modifié l'affichage utilisant les balises BBCODE [code][/code]
» Incorporer un autre code dans le code du message accodéon
» Le code popup s'installe dans le code source comment faire svp
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum