Circular Slides Generator

**Pamputt** · 16/03/2016, 08h56

Bonjour, j'ai d�couvert impress.js il y a peu car je voudrais me lancer dans les pr�sentations HTML qui ont l'air �norm�ment plus portables que celles r�alis�es avec Microsoft Powerpoint. Bref, l'exemple fourni de base avec impress.js est tr�s riche et m�me en peu trop pour moi qui n'ai que quelques bases en HTML. Par ailleurs, je cherche quelque chose de plus sobre tout en �tant sympa. Je suis donc tomb� sur Circular Slides Generator, qui propose quelque chose de tr�s sympa � mon go�t (une pr�sentation en cercle). Le probl�me c'est que je ne comprends pas grand chose � comment �a marche.
Dans l'ordre j'ai t�l�charg� l'archive sur github mais le probl�me c'est que quand je lance index.html, je n'obtiens pas du tout le m�me r�sultat que sur la page du projet ; en gros la pr�sentation a saut� et cliquer sur le bouton � Generate � ne fait rien.
J'imagine que ce n'est pas tr�s compliqu� pour quelqu'un qui connait bien le HTML mais j'avoue �tre un peu perdu. D'apr�s ce que je comprend, index.html sert � g�n�rer le code HTML et on a plus qu'� remplacer Slide XX par le contenu que l'on veut. Donc premier probl�me, le index.html r�cup�r� dans l'archive ne fonctionne pas comme je viens de le dire et deuxi�me probl�me ; m�me si je passe par le site du projet et que je g�n�re du code, le copier-coller dans un fichier texte puis le faire interpr�ter par firefox (apr�s avoir changer le chemin de impress.js vers un impress.js plac� dans le m�me dossier) ne me donne pas de pr�sentation en cercle ; j'ai simplement toutes les � diapos � les unes en dessous des autres comme des vulgaires pages d'un traitement de texte. Bref, je dois vraiment rater quelque chose.
Donc si quelqu'un peut m'�clairer sur le fonctionnement de ce projet, je lui en serais tr�s reconnaissant.
Merci d'avance

**SpaceFrog** · 16/03/2016, 09h04

Tu es sur que le fichier js se charge ?
Regarde en console du navigateur (touche F12)
onglet r�seau ...

As tu un erreur en console ?

**Pamputt** · 16/03/2016, 10h00

En effet, il semble que impress.js ne se lance pas.
Avec la console du navigateur, onglet R�seau, je vois uniquement le message

* Effectuez une requ�te ou Rechargez la page pour voir des informations d�taill�es concernant l'activit� r�seau.
* Cliquez sur le bouton (icone en forme d'horloge) pour lancer l'analyse des performances.

Comme pr�cis� pr�c�demment le fichier impress.js se trouve dans le m�me dossier que mon fichier test.html donc voici le code

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Circular Slides - impress.js</title>
<style>
body {
  background-image: url(circular-slides-generator-gh-pages/static/img/noise.png);
}
.step {
    position: relative;
    padding: 40px;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    -ms-box-sizing:     border-box;
    -o-box-sizing:      border-box;
    box-sizing:         border-box;
    font-family: 'PT Serif', georgia, serif;
    font-size: 48px;
    line-height: 1.5;
}
.slide {
  display: block;
  width: 800px;
  height: 600px;
  padding: 120px 60px;
  background-color: white;
  border: 1px solid rgba(0, 0, 0, .3);
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
  color: rgb(102, 102, 102);
  text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
  font-family: 'Open Sans', Arial, sans-serif;
}
.credits, .credits h2 {
  padding-top: 0;
}
</style>
</head>
<body>
<div id="impress">
<div class="step slide" data-x="-400" data-y="-300" data-rotate="0" data-scale="1.1156249999999999"><q>My Slides</q></div>
<div class="step slide" data-x="875" data-y="-299" data-rotate="0" data-scale="1"><q>Slide 1</q></div>
<div class="step slide" data-x="631" data-y="449" data-rotate="36" data-scale="1"><q>Slide 2</q></div>
<div class="step slide" data-x="-6" data-y="912" data-rotate="72" data-scale="1"><q>Slide 3</q></div>
<div class="step slide" data-x="-793" data-y="912" data-rotate="108" data-scale="1"><q>Slide 4</q></div>
<div class="step slide" data-x="-1431" data-y="449" data-rotate="144" data-scale="1"><q>Slide 5</q></div>
<div class="step slide" data-x="-1675" data-y="-300" data-rotate="180" data-scale="1"><q>Slide 6</q></div>
<div class="step slide" data-x="-1431" data-y="-1049" data-rotate="216" data-scale="1"><q>Slide 7</q></div>
<div class="step slide" data-x="-793" data-y="-1512" data-rotate="252" data-scale="1"><q>Slide 8</q></div>
<div class="step slide" data-x="-6" data-y="-1512" data-rotate="288" data-scale="1"><q>Slide 9</q></div>
<div class="step slide credits" data-x="631" data-y="-1049" data-rotate="324" data-scale="1">
    <h2>Credits</h2>
    <ul>
      <li>
        <a href="http://bartaz.github.io/impress.js" target="_blank">impress.js</a> - Bartek Szopka
      </li>
      <li>
        <a href="http://wmh.github.io/circular-slides-generator" target="_blank">Circular Slides Generator</a> - Hunter Wu
      </li>
    </ul>
  </div>
<div class="step" data-x="0" data-y="0" data-scale="6"></div>
</div>
<script src="impress.js"></script>
</body>
</html>

Le fichier impress.js est r�cup�r� depuis le github du projet

Circular Slides Generator

JavaScript

Vue hybride

Discussions similaires

Partager

Partager