Creapage.net Creapage.net
Le mot du développeur

Webmestre, je crée des sites Web depuis le Bénin.

Managed cycles (cycles monitorés)

Présentation

Le script Managed Cycles permet l'affichage simultané de plusieurs diaporamas. Il est optimisé afin de ne pas surcharger le processeur de l'ordinateur client.

Un petit délai aléatoire est ajouté au démarrage de chaque diaporama. Le survol du diaporama par la souris peut ou non stopper le diaporama.

Télécharger Managed cycles

Télécharger le fichier jquery.managedcycles.js (version du 27/10/2010 ; licence au choix : Creative Commons Paternité 3.0, MIT ou GPLv2).

Ce script utilise jQuery. La transition McScrollTransition utilise la bibliothèque jquery.scrollTo de Ariel Flesler.

Démonstration

  • Bonjour !

    Dans ce diaporama, cette diapositive de texte, puis quelques photographies. Défilement de droite à gauche. Le diaporama est mis en pause lors du survol de la souris.

Défilement de gauche à droite. Le diaporama est mis en pause lors du survol de la souris.

  • Défilement de gauche à droite. Le diaporama est mis en pause lors du survol de la souris.

  • Transition par effet de transparence. Pas de pause.

Le code JavaScript de cette démonstration :

$(document).ready(function() {
  var manager = new McCycleManager(true);
  manager.addCycle(new McSlideshow("div.slideshow-a", new McScrollTransition(800)), 7000).setPauseOnHover(true);
  manager.addCycle(new McSlideshow("div.slideshow-b", new McScrollTransition(700)), 4000).setPauseOnHover(true);
  manager.addCycle(new McSlideshow("div.slideshow-c", new McFadeTransition(2000)), 8000);
  manager.playAll();
});

Le code HTML de la page que vous lisez est un bon exemple. Les styles CSS qui vont avec sont ici.

La transition par défilement demande un peu d'attention. Un défilement de droite à gauche est généré par le style float: left sur l'élément <li>. Pour défiler de gauche à droite, on utilisera float: right. L'élément <ul> doit avoir une largeur assez grande pour contenir toutes les diapositives plus une, alignées sur une seule ligne. La transition par défilement duplique en effet la première diapositive et l'ajoute en dernière place.

Un élément <div class="no-js"> (optionnel), dont la taille doit être identique à celle des diapositives, affichera son contenu sur les navigateurs dont JavaScript est désactivé. Dans le cas d'une transition par défilement de gauche à droite, il est la seule manière d'obtenir un affichage correct avec JavaScript désactivé.

Comment ça marche ?

Une instance de la classe McCycleManager est un moniteur de McCycle. Une instance de McCycle contient une tâche que le moniteur exécute à intervalle régulier. Une classe McSlideshow, accompagnée de deux transitions possibles, utilise les services du moniteur de cycle.

Par défaut, le moniteur de cycles empêche l'exécution simultanée de deux tâches monitorées, ce qui permet d'ajouter autant de diaporamas que l'on veut dans une même page Web sans surcharger plus qu'il ne le faudrait le processeur.

Un diaporama est une énumération HTML (élément ul) dans une div. On peut y mettre du texte, des photographies, des photographies avec sous-titres ou tout ce que l'on veut, pourvu que les dimensions des différentes diapositives soient identiques.

Me contacter

Des réactions ou questions ? Elles sont à faire sur mon blog.

Pour me contacter : Creapage.net.