skip to main | skip to sidebar
Code 18
Manuel du savoir-faire à l'usage des geeks et des curieux
RSS
  • Accueil
  • Le web au Québec
  • Liens
  • Twitter
  • Facebook
  • À propos

samedi 21 mars 2009

Diaporama de photos en JavaScript, partie 1

Publié par Infinite Loop, à 10 h 58 0 commentaire

Ce matin, pendant que ma blonde dormait, j'ai fait un petit exercice pour créer un diaporama de photos simple en JavaScript, où les images défilent automatiquement. En moins d'une heure, j'ai réalisé deux versions, une utilisant des méthodes standards procédurales, et l'autre, que je présenterai demain, qui est plus orientée objet et qui introduit les fermetures. J'ai écrit ce code pour le plaisir, alors je ne prétends pas qu'il soit parfait et je ne serais certainement pas prêt à le mettre tel quel en production sans l'avoir préalablement paufiné. Comme tout ce que je présente ici, l'objectif est surtout de présenter le concept et de voir les applications possibles.

Pour atteindre mon but, j'ai utilisé la librairie Prototype pour simplifier les appels document.getElementById par $() et Script.aculo.us pour ajouter un effet de transition dans le chargement des images. Le reste est du JS pur. Je peux aussi dire que je l'ai testé uniquement sous Firefox 3 et Internet Explorer 7.

Pour commencer, j'ai défini un conteneur HTML pour la photo et un autre pour le compteur d'images qui apparaîtra au dessous. L'objectif est simplement de créer une boucle qui chargera alternativement les images d'une liste selon un intervalle régulier. La balise <img> servira à recevoir l'image en changeant dynamiquement son attribut source. Le compteur indiquera le numéro de l'image courante et le nombre d'images au total.

<p><img id="picture" src=""></p>
<span id="detail"></span>
On définit en JavaScript le chemin où se trouvent les images et une variable array liste tous les fichiers.
var path = 'images/vacances/';
var pics = new Array(
'001.jpg',
'002.jpg',
'003.jpg',
'004.jpg',
'005.jpg',
'006.jpg',
'007.jpg',
'008.jpg',
'009.jpg',
'010.jpg'
);
On initialise des variables pour indiquer l'image courante (l'indice dans la liste), le nombre total de photos et le temps d'affichage de chacune d'elles.
var currentPicture = 0;
var totalPictures = pics.length;
var showImageSeconds = 4;
Au chargement de la page, je démarre le slideshow en utilisant la notation de Prototype. Ensuite, je charge la première photo en appelant la méthode LoadPicture.
document.observe('dom:loaded', startSlideShow );

function startSlideShow() {
LoadPicture();
}
Dans le conteneur d'image <img>, on remplace la source par le chemin de la première image dans l'array. On met à jour le compteur avec les valeurs courantes en utilisant update() de Prototype, mais on aurait pu le faire aussi bien avec InnerHTML. On fait apparaître l'image avec l'effet Appear de Scriptaculous (qui est l'inverse de Fade) qui dure une seconde. On affiche ensuite l'image quelques secondes selon la variable définie plus haut.
function LoadPicture() {
$('picture').src = path + pics[currentPicture];

// compteur
$('detail').update( (currentPicture + 1) + ' / ' + totalPictures);

Effect.Appear('picture', { duration:1, from:0.0, to:1.0 });
Display(showImageSeconds);
}
Pour afficher l'image un certain temps, j'appelle setTimeout qui me permet d'effectuer une pause avant de montrer la suivante. Lorsque le temps se sera écoulé, la fonction ChangePicture sera appelée.
function Display(sec) {
setTimeout("ChangePicture()", sec * 1000);
}
Lors du changement de photo, on vérifie si l'indice est le dernier de la liste. Si c'est le cas, on revient au début pour afficher la première photo. Un petit effet la fait disparaître et comme on veut voir la transition correctement, on doit attendre une seconde. Le temps de l'effet est spécifié dans la propriété duration alors on fait coïncider l'appel de Wait() pour attendre que l'effet soit terminé avant de changer d'image.
function ChangePicture() {
currentPicture++;
// si c'est la dernière
if (currentPicture == totalPictures )
currentPicture = 0;

Effect.Fade('picture', { duration:1, from:1.0, to:0.0 });
Wait(1);
}
Lorsque l'effet est terminé, on charge la photo suivante.
function Wait(sec) {
setTimeout("LoadPicture()", sec * 1000);
}
En exécutant le code, on devrait voir les images défiler en boucle une à une. Le problème avec ce genre de code procédural, c'est que ça ne forme pas un tout, il n'y a pas d'unité qui relie les variables et fonctions entre elles. Demain, je présenterai une refonte du code en version orientée objet et j'expliquerai le concept des fermetures JavaScript (closures) pour pouvoir créer un objet Slideshow mieux structuré, plus facile à comprendre et à maintenir.


Tags: JavaScript

0 réponse à "Diaporama de photos en JavaScript, partie 1"


Publier un commentaire

Message plus récent Messages plus anciens Accueil
S'abonner à : Publier des commentaires (Atom)
    Suivre @code18 sur Twitter

    Catégories

    • Apache (21)
    • Citations (167)
    • Club Vidéo (24)
    • Coffre à outils (56)
    • CSS (8)
    • Curiosités (117)
    • Design Pattern (2)
    • Drupal (8)
    • Easter Eggs (22)
    • Extensions Firefox (20)
    • GIMP (7)
    • Histoire (21)
    • HTML (32)
    • Humour (57)
    • Intégration (34)
    • iPod (12)
    • JavaScript (110)
    • Jeu de combat (6)
    • Le coin du geek (128)
    • Liens (12)
    • Linux (56)
    • Livres (78)
    • Lois et principes (46)
    • Marché des saveurs (26)
    • Mathématique (18)
    • Mobile (5)
    • Montréal (32)
    • Musique (112)
    • Pancartes et écriteaux (16)
    • Perl (8)
    • Pérou (1)
    • PHP (130)
    • PostgreSQL (44)
    • Programmation (105)
    • Saviez-vous que (55)
    • Sécurité (22)
    • SEO (5)
    • SQL Server (22)
    • Vieilles publicités (6)
    • Virtualisation (8)
    • Voyages (1)
    • Zend Framework (26)

    Divers

    Archives

    • ►  2015 (6)
      • ►  août 2015 (1)
      • ►  juillet 2015 (1)
      • ►  février 2015 (3)
      • ►  janvier 2015 (1)
    • ►  2014 (8)
      • ►  décembre 2014 (1)
      • ►  novembre 2014 (1)
      • ►  octobre 2014 (1)
      • ►  août 2014 (2)
      • ►  juillet 2014 (2)
      • ►  janvier 2014 (1)
    • ►  2013 (53)
      • ►  décembre 2013 (2)
      • ►  novembre 2013 (1)
      • ►  octobre 2013 (3)
      • ►  septembre 2013 (2)
      • ►  août 2013 (5)
      • ►  juillet 2013 (3)
      • ►  juin 2013 (5)
      • ►  mai 2013 (3)
      • ►  avril 2013 (7)
      • ►  mars 2013 (7)
      • ►  février 2013 (11)
      • ►  janvier 2013 (4)
    • ►  2012 (105)
      • ►  décembre 2012 (8)
      • ►  novembre 2012 (5)
      • ►  octobre 2012 (4)
      • ►  septembre 2012 (1)
      • ►  août 2012 (8)
      • ►  juillet 2012 (7)
      • ►  juin 2012 (7)
      • ►  mai 2012 (10)
      • ►  avril 2012 (13)
      • ►  mars 2012 (15)
      • ►  février 2012 (15)
      • ►  janvier 2012 (12)
    • ►  2011 (146)
      • ►  décembre 2011 (14)
      • ►  novembre 2011 (11)
      • ►  octobre 2011 (12)
      • ►  septembre 2011 (13)
      • ►  août 2011 (15)
      • ►  juillet 2011 (17)
      • ►  juin 2011 (18)
      • ►  mai 2011 (15)
      • ►  avril 2011 (9)
      • ►  mars 2011 (7)
      • ►  février 2011 (3)
      • ►  janvier 2011 (12)
    • ►  2010 (398)
      • ►  décembre 2010 (29)
      • ►  novembre 2010 (28)
      • ►  octobre 2010 (32)
      • ►  septembre 2010 (34)
      • ►  août 2010 (22)
      • ►  juillet 2010 (35)
      • ►  juin 2010 (42)
      • ►  mai 2010 (36)
      • ►  avril 2010 (37)
      • ►  mars 2010 (34)
      • ►  février 2010 (32)
      • ►  janvier 2010 (37)
    • ▼  2009 (430)
      • ►  décembre 2009 (32)
      • ►  novembre 2009 (34)
      • ►  octobre 2009 (33)
      • ►  septembre 2009 (37)
      • ►  août 2009 (37)
      • ►  juillet 2009 (39)
      • ►  juin 2009 (38)
      • ►  mai 2009 (37)
      • ►  avril 2009 (35)
      • ▼  mars 2009 (37)
        • Étui pour ordinateur portatif
        • Pagination des résultats sous SQL Server
        • Calendrier jQuery UI
        • Citation no. 23 sur l'ambidextrie
        • Poster son statut Twitter avec PHP
        • Informatique du film Jurassic Park
        • XML valide pour RSS
        • Gadgets électroniques et informatiques
        • Redéfinition de classe PHP
        • Origines du Hello World
        • Diaporama de photos en JavaScript, partie 2
        • Citation no. 22 sur la simplicité
        • Diaporama de photos en JavaScript, partie 1
        • Sortie officielle de Internet Explorer 8
        • Convertir l'encodage d'une page avec Dreamweaver
        • Comparaison de texte PostgreSQL
        • Lister les fichiers d'un répertoire en PHP
        • Pages 404 originales
        • Erreur curieuse en PHP : Paamayim Nekudotayim
        • Citation no. 21 sur les mots de passe
        • Manipuler une archive TAR compressée (gzip)
        • Une histoire de pixel brûlé
        • Il n'y a pas d'Easter Eggs dans ce programme
        • Adresse de courriel temporaire jetable
        • Bande dessinée sur la sécurité informatique
        • Populer un formulaire automatiquement
        • Interface countable en PHP
        • Conteneurs HTML à coins ronds
        • Citation no. 20 sur les consommateurs mécontents
        • Conférence PHP Québec 2009 - Jour 3
        • Manipuler une archive TAR
        • Conférence PHP Québec 2009 - Jour 2
        • Conférence PHP Québec 2009 - Jour 1
        • Analyser et configurer les paramètres GET et POST
        • Protéger son code PHP avec Zend Guard
        • Hébergement PHP gratuit
        • Citation no. 19 sur la consommation d'alcool
      • ►  février 2009 (32)
      • ►  janvier 2009 (39)
    • ►  2008 (84)
      • ►  décembre 2008 (34)
      • ►  novembre 2008 (39)
      • ►  octobre 2008 (11)

    Abonnés

Copyright © All Rights Reserved. Code 18 | Converted into Blogger Templates by Theme Craft