jDiapo

Présentation

jDiapo est un petit script JavaScript qui, associé à la librairie de fonctions jQuery, facilite l'affichage de simples diaporamas.

jDiapo autorise l'affichage de tout types de contenus Html, par simple ciblage du bloc source et du type de balise à utiliser.

jDiapo propose 3 modes de transition standards :

  • Normal : affichage et masquage progressif à partir du côté haut gauche du bloc ;
  • Slide : affichage et masquage progressif de type rideau vertical, du bas en haut du bloc ;
  • Fade : affichage et masquage progressif par apparition et disparition des contenus.

jDiapo dispose de deux autres options configurables :

  • Réglage de la durée d'affichage de chaque diapo ;
  • Réglage de la durée des effets de transition.

Principe de fonctionnement

Le principe de fonctionnement de jDiapo est relativement simple :

  • On commence par préparer les objets à afficher par type (textes, images, vidéos, blocs, etc.) dans un bloc Html source, avec un identifiant unique, en début du "body" de préférence, qui sera masqué par défaut (style Css "display" réglé à "none") ;
  • On place ensuite un bloc Html de destination (de type "div" en général), avec lui aussi un identifiant unique, à l'endroit de la page où on souhaite afficher le diaporama ;
  • Enfin, il suffit de placer un petit bout de code JavaScript dans le "head" de la page pour lancer le diaporama, dès le chargement de la page, en fournissant les arguments correspondants aux objets Html préparés.

Pour résumer :

  • Un bloc Html source masqué, contenant les objets à afficher ;
  • Un bloc Html de destination où le diaporama sera affiché ;
  • Un bout de code JavaScript dans le "head" pour lancer le diaporama.

Configuration

Pour configurer le fonctionnement de jDiapo, il faut fournir quelques arguments au script au moment de lancer le diaporama.
Ces arguments sont les suivants (dans l'ordre) :

  1. Source : l'identifiant unique du bloc Html source contenant les objets à afficher ;
  2. Objets : la balise correspondante aux objets Html à afficher (par ex. : img, div, p, span, etc.) ;
  3. Destination : l'identifiant unique du bloc Html de destination où les objets seront affichés ;
  4. Effet : le type d'effet de transition souhaité : 'normal', 'slide' ou 'fade' (ou leur initiale : 'n', 's' ou 'f') ; ;
  5. Durée affichage : la durée de l'affichage des objets, en millisecondes (1000 = 1 seconde) ;
  6. Durée transition : la durée des effets de transition, en millisecondes (100 = 1/10e de seconde).

IMPORTANT

  • Bien respecter la casse (majuscules et minuscules) pour les identifiants des blocs Html "source" et "destination".
  • Toujours saisir la balise des objets à afficher et le mode d'affichage en lettres minuscules.
  • Tous les arguments doivent impérativement être fournis et dans le bon ordre !

Exemple d'utilisation

Voici un exemple de code JavaScript à placer dans le "head" de la page Html : 

<!-- Chargement de la librairie jQuery -->
<script type="text/javascript" src="jquery.js"></script>
<!-- Chargement du script jDiapo -->
<script type="text/javascript" src="jdiapo.js"></script>
<!-- Initialisation et lancement du diaporama -->
<script type='text/javascript'>
// Attente du chargement complet du code Html de la page
$(document).ready(function() {		
	// Lancement du diaporama avec les arguments requis
	jDiapo('#images', 'img', '#diapo', 'n', 3000, 300);
});
</script>

Voici un exemple de bloc source, contenant des images, à placer au début du "body" : 

<!-- Bloc Html source masqué contenant les objets à afficher -->
<div id="images" style="display:none;">
	<img src="01.jpg">
	<img src="02.jpg">
	<img src="03.jpg">
	<img src="04.jpg">
	<img src="05.jpg">
</div>

Enfin, un exemple de bloc de destination où le diaporama sera affiché : 

<!-- Bloc Html de destination où les objets seronts affichés -->
<div id="diapo">
</div>

Voci deux possibilités pour arrêter le diaporama : 

<!-- Exemple de lien pour stopper le diaporama lorsqu'on clique dessus -->
<a href="#" onclick="jDiapoStop('#diapo'); return false;">Stop diapo</a>


<!-- Stopper le diaporama par script -->
<script type='text/javascript'>
jDiapoStop('#diapo'); // On stoppe le diaporama
</script>

Téléchargement

Démo

 

Δ