Français

Démarrer

L'installation est très simple: en effet ColorJS s'éxécute coté client. Il n'est pas nécessaire d'installer un serveur. Téléchargez simplement la dernière version sur le dépôt officiel, outilisez le CDN

Choisir le support

ColorJS est disponible sous la forme d'une archive ou via un cdn.

Si vous ne savez pas quelle méthode utiliser, voici un tableau qui récapitule les possibilités de chaque méthode

Méthode

Téléchargement

CDN

Nombre de lignes de code à ajouter dans votre fichier

1

1

Ne nécessite pas d'autres fichiers que votre diaporama lui-même

❌

✔

Est utilisable sans connexion internet

✔

❌

Rapidité

➕➕➕

➕

Facilité de mise à jour

❌

✔

Avec l'archive téléchargée

La première méthode est de télécharger l'archive indiquée plus haut.

Fichiers téléchargés

Vous obtenez dans l'archive la structure suivante:

.
├── assets/
|   ├── fonts/
|   ├── images/
|   ├── colorjs.bundle.css
|   └── colorjs.bundle.js
├── example.html
├── force-ratio.html
└── index.html

  • example.html: Un diaporama d'exemple déjà créé. vous pouvez l'ouvrir pour voir à quoi ressemble un diaporama déjà existant. Il est facultatif et vous pouvez le supprimer.

  • index.html: Un fichier HTML avec les éléments de base pour commencer la création de votre diaporama.

  • force-ratio.html: Une page qui permet d'afficher le diaporama contenu dans index.html, mais en conservant le ratio d'aspect 16:9 (modifiable).

  • assets/

    • fonts/ et images/: dossiers nécessaires pour la librairie FontAwesome.

    • colorjs.bundle.css: les styles utilisés par ColorJS

    • colorjs.bundle.js: le script ColorJS en lui-même, à inclure dans la pages html de votre diaporama.

Vous pourrez ensuite créer le contenu de votre diaporama dans index.html.

Avec le CDN

ColorJS dispose également d'un CDN accessible à l'adresse cdn.colorjs.cc. Il permet d'éviter d'avoir à télécharger des fichiers.

Routes disponibles:

  • Par numéro de version: /v#/colorjs.bundle.js (ex: /v1.0/colorjs.bundle.js)

  • Dernière version directement: /latest/colorjs.bundle.js

Pour l'utiliser, partez d'un fichier HTML5 standard, par exemple:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Titre de mon diaporama</title>
</head>
<body>

</body>
</html>

Dans le body, créez un div qui a l'id cjs-slider. C'est le Slider, l'élément qui contiendra toutes vos slides (diapos).

Enfin dans la section head, ajoutez la ligne de code:

<script defer src="https://cdn.colorjs.cc/v1.0.1/colorjs.bundle.js"></script>

Ce qui doit donner :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Titre de mon diaporama</title>
    
    <script defer src="https://cdn.colorjs.cc/v1.0.1/colorjs.bundle.js"></script>
</head>
<body>
    <div id="cjs-slider">

    </div>
</body>
</html>

Vous êtes prêt à créer votre diaporama !

Attention: Si vous utilisez le CDN, il faudra disposer d'une connexion internet à chaque fois que vous projetterez le diaporama, il peut être plus prudent d'utiliser la première méthode si vous avez un doute.

En revanche le CDN est une très bonne solution si vous prévoyez de publier le diaporama sur un serveur.

PreviousAccueilNextCréer une présentation

Last updated