Diapoo, est une librairie javascript qui permet de réaliser rapidement un diaporama javascript web2.0. C'est simple, accessible, rapide, et facilement personnalisable. La présentation se fait avec les css, et le diaporama est visualisable lorsque le javascript est désactivé. Vous pouvez donc adapter Diapoo à n'importe quel design, dans n'importe quel cas. Utiliser la puissance du css, combiné à la facilité du xhtml c'est Révolutionnaire !
Pour vous convaincre, voici un
diaporama en javascript réalisé avec diapoo.
Comment utiliser Diapoo ?
Pour utiliser Diapoo, il faut commencer par
télécharger l'application. Diapoo utilisant les librairies
prototype et scriptaculous. Vous devez aussi
les télécharger. Les icônes qui viennent du thème Tango sont fournies avec.
Pour créer un diaporama, il faut commencer
par avoir un block (une div par exemple) qui contiendra les
diapositives. Il est important de pouvoir identifier facilement
ce block. Dans le cas général, un identifiant (id) est
très bien. Pour chaque diapositive, il faudra créer un block
ayant pour class diapo.
C'est dans ce block que sera contenu la diapositive.
À ce stade, les diapositives sont
normalement alignés verticalement, sans aucune présentation.
C'est le moment de travailler le css, ceux qui n'auront pas le
javascript activé verrons le diaporama sous cette forme.
Après avoir terminé sont magnifique travail
artistique, le javascript arrive (on peut aussi penser que
c'est de l'art). Le diaporama doit être initialiser une fois
les librairies et les diapositives chargées. un window.onload
est très bien pour ça.
new
Diaporama(block_diapositives,
{réglages});
block_diapositives
est le block qui contient les diapositives (comme son nom
l'indique si bien). Pour une div ayant un id 'diaporama', block_diapositives
vaudra 'diaporama', et pas autre
chose pour embêter. Le deuxième paramètre est un JSON qui contient les
réglages, et les options.
Quels sont les options et les réglages disponibles ?
- nom_diaporama: string
-
- Permet au script de s'auto-identifier, obligatoire lorsqu'il y a plusieurs diaporamas sur la même page. Pour chaque diaporama, le nom devra être différent.
- delai_actions: int
-
- Règle le délai en mini-secondes (secondes *1000) avant que la barre des actions se masque.
- temps_diapo: int
-
- Délai en mini-secondes avant que la diapositive passe à la suivante.
- depart_auto: boolean
-
- Si true, le diaporama commence automatiquement.
- duree_transition: float
-
- Durée de la transition (en secondes) entre chaque diapositive.
- chemin_boutons: string
-
- Contient le chemin des boutons, par exemple lorsque
les boutons ne sont pas dans le même dossier que la
page.
- Contient le chemin des boutons, par exemple lorsque
les boutons ne sont pas dans le même dossier que la
page.
Pour changer les transitions, il faut modifier la librairie.
Liste des transitions possibles avec scriptaculous.
Comment personnaliser le bouton de lancement du diaporama ?
Pour avoir un bouton de lancement
personnalisé, il faut créer un élément qui devra être identifié
(là aussi, un id devrait faire l'affaire). Il doit être masqué
(display:none;)
pour les navigateurs n'ayant pas javascript. Si le diaporama
fonctionne, il sera automatiquement affiché. Cet élément sera
évidemment le bouton.
Comment personnaliser les diapositives, si le javascript est activé ?
Lorsque le diaporama fonctionne, un attribut
class est rajouté à block_diapositives.
Il s'agit de diaporama_js.
Comment personnaliser les actions ?
Les actions, qui ont un attribut class actions ont par exemple le code xhtml suivant:
<div
style="opacity: 0.999999;"
class="actions" id="diaporama_actions"
>
<a style="display: none;"
href="#" id="diaporama_bouton_revenir"
>
<img src="../boutons_diapoo/revenir.png"
alt="Revenir au début du
diaporama">
</a><a
style="display: none;"
href="#" id="diaporama_bouton_precedente"
>
<img src="../boutons_diapoo/precedente.png"
alt="Diapositive
précédente">
</a><a
style="" href="#" id="diaporama_bouton_demarrer"
>
<img src="../boutons_diapoo/demarrer.png"
alt="Démarrer le
diaporama">
</a><a
style="display: none;"
href="#" id="diaporama_bouton_pause"
>
<img src="../boutons_diapoo/pause.png"
alt="Mettre en pause le
diaporama">
</a><a
style="" href="#" id="diaporama_bouton_stop"
>
<img src="../boutons_diapoo/stop.png"
alt="Stopper le
diaporama">
</a><a
style="" href="#" id="diaporama_bouton_suivante"
>
<img src="../boutons_diapoo/suivante.png"
alt="Diapositive
suivante">
</a>
</div>
Comment télécharger diapoo ?
Version 1.1
- diapoo.zip (1.1 mo)
Quel est la license ?
Diapoo est distribué
sous license MIT.
Copyright (c) 2007 Antoine Pultier (http://www.blogjaune.fr/)
Permission is hereby granted, free of charge, to any person
obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction,
including
without limitation the rights to use, copy, modify, merge,
publish,
distribute, sublicense, and/or sell copies of the Software, and
to
permit persons to whom the Software is furnished to do so,
subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.