Bonjour bonjour, après un looooong oubli, je viens enfin vous proposer ce petit livre animé où vous pourrez mettre votre contexte ou tout autre texte. Il s'agit d'un livre où vous pouvez tourner les pages.
Voilà l'aperçu (si vous ne le voyez pas, actualisez simplement la page) :
Je tiens à préciser que je me suis appuyée sur un tutoriel en anglais pour le réaliser.
Ce livre nécessite une page html, une page qui sera hébergée sur un forum donc.
Il faut donc créer une page html pour héberger notre livre. Si vous voulez que celui ci soit visible dans un message, il faudra l'herberger via une iframe. Vous êtes perdus ? Allons y petit à petit.
PS: N'oubliez pas de créditer Never Utopia dans vos crédits ou sur la page où vous mettez ce code, avec un petit lien s'il vous plaît. Vous n'êtes pas obligés de mettre mon nom, juste un petit lien pour N-U suffira ^^
De plus si vous l'utiliser, penser à indiquez que si rien ne s'affiche, il suffit d'actualiser.
Créer une page html
Allez dans : Modules -> Gestion des pages html -> Création en mode avancé
Le code correspondant au livre est celui-ci :
- Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre de la Page</title>
<base target="_blank" />
<style type="text/css">
#myBook {
display:none;
position:absolute;
left : 0px;
top:0px;
width: 328px;
height:533px;
}
.imBookPage {
position:absolute;
left:0px;
top:0px;
width: 328px;
height:533px;
overflow:hidden;
}
</style>
<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>
<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://img11.hostingpics.net/pics/585593couv.png)">
<div style="height: 533px; color: peru; display:table-cell; vertical-align: middle; font-size: 40px; font-family: Times New Roman ; text-align: center; width : 328px;">
Memory
</div>
</div>
<div class="imBookPage" style="background: url(http://img15.hostingpics.net/pics/486457couvdos.png)">
<br /> <img src="http://img11.hostingpics.net/pics/431017vieillephoto2.png" />
</div>
<div class="imBookPage" style="background: url(http://img11.hostingpics.net/pics/234920livre2.png)">
<br />
<div style=" float:left; margin : 25px; text-align: justify; font-size: 14px; color: saddlebrown;">
<div style=" font-size:300%; float:left; margin: 2px; color: peru;">
Q
</div>
uod si rectum statuerimus vel concedere amicis, quidquid velint, vel impetrare ab iis, quidquid velimus, perfecta quidem sapientia si simus, nihil habeat res vitii; sed loquimur de iis amicis qui ante oculos sunt, quos vidimus aut de quibus memoriam accepimus, quos novit vita communis. Ex hoc numero nobis exempla sumenda sunt, et eorum quidem maxime qui ad sapientiam proxime accedunt.<br /><br />Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit. <br /><br />Et est admodum mirum videre plebem innumeram mentibus ardore quodam infuso cum dimicationum curulium eventu pendentem. haec similiaque memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad textum.
</div>
</div>
<div class="imBookPage" style="background: url(http://img15.hostingpics.net/pics/548825livre2dos.png)">
<div style=" float:left; margin : 25px; text-align: justify; font-size: 14px; color: saddlebrown;">
Contenu
</div>
</div>
<div class="imBookPage" style="background: url(http://img11.hostingpics.net/pics/234920livre2.png)">
<div style=" float:left; margin : 25px; text-align: justify; font-size: 14px; color: saddlebrown;">
Contenu
</div>
</div>
<div class="imBookPage" style="background: url(http://img15.hostingpics.net/pics/548825livre2dos.png)">
<div style=" float:left; margin : 25px; text-align: justify; font-size: 14px; color: saddlebrown;">
Contenu
</div>
</div>
<div class="imBookPage" style="background: url(http://img11.hostingpics.net/pics/234920livre2.png)">
<div style=" float:left; margin : 25px; text-align: justify; font-size: 14px; color: saddlebrown;">
Contenu
</div>
</div>
</div>
</body>
</html>
Explication du code
- Code:
<style type="text/css">
#myBook {
display:none;
position:absolute;
left : 0px;
top:0px;
width: 328px;
height:533px;
}
.imBookPage {
position:absolute;
left:0px;
top:0px;
width: 328px;
height:533px;
overflow:hidden;
}
</style>
<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>
<script type="text/javascript">$(document).ready( function() { $("#myBook").imBookFlip({ page_class: 'imBookPage' });});</script>
- Code:
<div class="imBookPage" style="background: url(http://img11.hostingpics.net/pics/585593couv.png)">
Blabla
</div>
- Code:
<div style="height: 533px; color: peru; display:table-cell; vertical-align: middle; font-size: 40px; font-family: Times New Roman ; text-align: center; width : 328px;">
Memory
</div>
- Code:
<img src="http://img11.hostingpics.net/pics/431017vieillephoto2.png" />
- Code:
<div style=" float:left; margin : 25px; text-align: justify; font-size: 14px; color: saddlebrown;"> mise en forme du texte contenu dans la page </div>
- Code:
<div style=" font-size:300%; float:left; margin: 2px; color: peru;">
Q
</div>
Faire une iframe
Vous voulez insérer ce livre dans un message ? Je vous renvoie au très bon tutoriel de Cheshire cat
Allez y pour regarder les explications ! En somme ça nous donne avec mon exemple:
- Code:
<iframe src="LIEN DE VOTRE PAGE HTML" frameborder="0" scrolling="no" style="width: 660px; height: 533px; display: block; margin: auto;"></iframe>
Dernière édition par Youp le Mer 2 Déc 2015 - 1:01, édité 4 fois
J'ai complètement oublié le crédit alors n'oubliez pas de créditer Never Utopia dans vos crédits ou sur la page où vous mettez ce code, avec un petit lien s'il vous plaît. Vous n'êtes pas obligés de mettre mon nom, juste un petit lien pour N-U suffira ^^
