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

dimanche 22 mars 2009

Diaporama de photos en JavaScript, partie 2

Publié par Infinite Loop, à 11 h 04 0 commentaire

Hier, j'ai démontré comment on pouvait programmer un diaporama de base pour afficher des photos. Bien que le code était fonctionnel, sa structure laissait à désirer. Avant de lire cette deuxième partie, je vous suggère de lire l'introduction du sujet, vous pourrez mieux comparer les améliorations apportées pour transformer le code en orientée objet. J'introduirai aussi le concept des closures JavaScript (fermetures), qui sont nécessaires à la réalisation de cet exercice.

La première amélioration apportée sera d'ajouter deux boutons pour pouvoir démarrer et arrêter le défilement des photos :

<input type="button" id="btnStart" value="Démarrer" />
<input type="button" id="btnEnd" value="Terminer" />
Contrairement à l'exemple précédent, comme le diaporama ne débutera pas automatiquement, on voudra cacher la photo et sa vignette jusqu'à ce que le bouton soit cliqué. Nous allons placer les balises <img> et <span> dans un conteneur que nous allons cacher au chargement de la page.
<div id="slideshow">
<p><img id="pictureHolder" src=""></p>
<span id="counter"></span>
</div>
Avec Prototype (mais on aurait aussi pu prendre jQuery), on appelle un fonction d'initialisation qui attache les événements aux deux boutons.
document.observe('dom:loaded', initialize );

function initialize() {
initSlideshow();
Event.observe('btnStart', 'click', showSlideshow );
Event.observe('btnEnd', 'click', hideSlideshow );
}
On définit les méthodes et on inclut les appels à un objet "s" encore inexistant, qui sera l'objet slideshow, instancié globalement.
function initSlideshow() {
hideSlideshow();
}

function showSlideshow() {
$('slideshow').show();
s.start();
}

function hideSlideshow() {
$('slideshow').hide();
s.end();
}
Jusqu'ici, nous n'avons pas encore couvert la refonte orientée objet de notre slideshow. Par contre, on sait qu'on voudra obtenir un code semblable à ceci, où le constructeur (new Slideshow) prendra comme attributs :
  • l'ID du conteneur d'image <img>
  • l'ID du compteur, la vignette <span>
  • le chemin du répertoire où sont placées les images
  • un array qui contient la liste des images
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'
);

var s = new Slideshow('pictureHolder', 'counter', path, pics);
s.showLengthInSeconds(1);

// et plus tard, contrôler le défilement
s.start();
s.end();
Pour commencer, il faut définir l'objet :
function Slideshow(pImageId, pCounterId, pPath, pPicsArray) {
var _self = this; // closure :-)

this.holderId = pImageId;
this.counterId = pCounterId;
this.path = pPath;
this.pics = pPicsArray;
this.appearLength;
this.currentPicture = 0;

this.timerDisplay;
this.timerChange;

// pour le moment, j'assume qu'il y a au moins une photo
this.totalPictures = this.pics.length;
}
Ici, on utilise le mot clé "this" pour attacher des propriétés à l'objet Slideshow. Les variables sont initialisées aux valeurs par défaut et selon les paramètres reçus.

La première ligne sert à créer une fermeture (closure), c'est-à-dire une référence sur l'objet actuel Slideshow. Comme notre objet contiendra des fonctions, si nous essayons d'utiliser "this" à l'intérieur, ce sera le "this" de la portée (scope) de la fonction, et non pas le "this" de notre objet. En créant une référence dans une variable dès le départ, nous serons en mesure de faire la distinction entre la portée locale de la fonction et globale de l'objet.

À l'intérieur de Slideshow(), on attachera des fonctions anonymes (leur définition ne contient pas de nom, on les appellera par le nom associé à l'objet)
this.showLengthInSeconds = function(sec) {
_self.appearLength = sec;
}

this.start = function() {
_self.loadPicture();
}

this.loadPicture = function() {
// remarquez l'utilisation de _self
$(_self.holderId).src = _self.path + _self.pics[_self.currentPicture];
_self.showCounter();

Effect.Appear(_self.holderId, { duration:1, from:0.0, to:1.0 });

_self.displayFor(_self.appearLength);
}

this.showCounter = function() {
$(_self.counterId).update( (_self.currentPicture + 1) + ' / ' + _self.totalPictures + ' - ' + _self.pics[_self.currentPicture]);
}

this.displayFor = function(sec) {
// utilisation du closure pour faire le callback
_self.timerDisplay =
setTimeout(
function() { _self.changePicture(); },
sec * 1000
);
}

this.changePicture = function() {
_self.currentPicture++;
if (_self.currentPicture == _self.totalPictures )
_self.currentPicture = 0;

Effect.Fade(_self.holderId, { duration:1, from:1.0, to:0.0 });
_self.waitFadeOutEnds(1); // 1 sec, according to duration
}

this.waitFadeOutEnds = function(sec) {
// setTimeout s'attend à recevoir des millisecondes, donc paramètre secondes * 1000
_self.timerChange =
setTimeout(
function() { _self.loadPicture(); },
sec * 1000
);
}

this.end = function() {
clearTimeout( _self.timerDisplay );
clearTimeout( _self.timerChange );
}
En conclusion, il y a trois notions importantes à retenir pour réussir à faire fonctionner le tout sans problème. Elles se retrouvent dans les fonctions displayFor() et waitFadeOutEnd() :
  • l'utilisation de setTimeout pour faire un appel à une fonction à un intervalle régulier
  • conserver une référence sur le timerID (_self.timerDisplay et _self.timerChange). Ceci nous permettra de stopper le callback, donc d'arrêter le diaporama
  • l'utilisation du closure _self pour appeler la fonction à l'intérieur d'une fonction anonyme, plutôt que d'utiliser setTimeout avec le code en texte
Comme les fonctions appartiennent à l'objet, il n'y a plus de risque de collision entre des noms de fonctions utilisés : deux objets peuvent avoir une fonction du même nom. De plus, on peut sans problème instancier plusieurs objets du même type, chose qui aurait été difficile avec l'exemple de la partie 1.


Tags: JavaScript

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


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