Slideshow jQuery accessible | Snoupix

Dans ce tutoriel, vous allez apprendre comment réaliser un slideshow jQuery accessible pour votre site web. Étapes par étapes, vous découvrirez le processus de création en allant du HTML jusqu'au Javascript. Ceci est un tutoriel basé sur celui du site anglophone SixRevisions. Merci à eux de nous avoir autorisé à le reprendre pour le traduire et l'améliorer un peu.

 

 

 

La 2^ème partie de ce tutoriel (et exclusivement conçue par nous) portera sur la gestion dynamique de ce slideShow : Ajout/Suppression de slides , miniaturisation automatique des images, changer la position des slides (et tout ça en Ajax). Cette partie va en fait consister à étudier la partie statique de ce slideShow.

 

Les bases du concept

La partie la plus importante de tout bon composant web est d'avoir une structure HTML solide et bien construite. Avoir une base sémantique cohérente signifie que votre contenu pourra être accessible dans tous les navigateurs actuels.

La structure de notre contenu est matérialisé par une div qu'on appellera #slidehow et qui servira de conteneur principal pour notre slideshow. A l'intérieur de cette div, on a une autre div appellée #slideContainer qui contient les slides, chacun d'eux étant matérialisé par une div avec une classe .slide.

Etape 1: HTML

<!-- Slideshow HTML -->
<div id="slideshow">
  <div id="slidesContainer">
    <div class="slide">
      <!-- Contenu pour le slide 1 -->
    </div>
    <div class="slide">
      <!-- Contenu pour le slide 2 -->
    </div>
    <div class="slide">
      <!-- Contenu pour le slide 3 -->
    </div>
    <div class="slide">
      <!-- Contenu pour le slide 4 -->
    </div>
  </div>
</div>
<!-- Slideshow HTML -->

Dans l'exemple n°1 ci-dessous, vous verrez comment les navigateurs textuels et ceux incapables d'interpréter du CSS et du Javascript voient notre slideshow. Il est important de préciser que tout notre contenu est facilement accessible; rien n'est caché pour l'utilisateur, pour être sur que vraiment tout le monde puissent voir le contenu.

Vous remarquerez qu'il n'y a pas de code HTML pour les flèches de gauche et droite, car elles seront insérées dans le DOM après, grâce au Javascript. Le fait de les avoir intégrer au niveau du contenu aurait été confus pour les individus n'ayant pas la possibilité d'exécuter le CSS et le Javascript.

Exemple n°1: La structure HTML du contenu du slideshow.

Conseil: Testez l'accessibilité avant, et souvent. Lorsque vous travaillez sur quelque chose de nouveau, vous devez toujours tester votre structure HTML pour vérifier si elle est accessible. Vous pouvez par exemple utiliser WebAnywhere, une application web permettant de simuler l'utilisation d'un logiciel qui « lis » votre l'écran.

Etape 2: Styler le SlideShow

La prochaine étape pour obtenir un design efficace est d'avoir une panoplie de style qui tiennent compte de la possibilité que l'internaute ait le Javascript de désactivé.

Pour la div  #slideContainer, on met la propriété overflow en auto afin que la barre de défilement apparaisse lorsque le contenu dépasse la hauteur de 263px (c'est la hauteur des slides).

#slideshow #slidesContainer {
  margin:0 auto;
  width:560px;
  height:263px;
  overflow:auto; /* affiche une scrollbar au cas ou */
  position:relative;
}

Il faut réduire la largeur des div avec la classe .slide de 20px pour faire apparaître la barre de défilement de droite lorsque le Javascript est désactivé.

#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:540px;  /* reduit de 20 pixels la div #slidesContainer pour permettre d'afficher la barre de scroll */
  height:263px;
}

Sans le Javascript, le contenu reste accessible; les utilisateurs peuvent faire défiler le contenu pour voir tous les slides.

Exemple n°2: Le slideshow sans le Javascript.

Vous pouvez également donner a la classe .slide un float:left; afin de rendre le défilement vertical au lieu d'un défilement horizontal.

Les flèches (CSS)

Pour éviter de ralentir l'exécution du Javascript, nous allons déclarer les styles pour les flèches de défilement qui seront insérées dans le DOM grâce au jQuery. Les flèches seront matérialisées par des , c'est pourquoi l'on déclare la propriété cursor avec la valeur pointer afin de changer le curseur de la souris lors du hover. La propriété text-indent permet de masquer le texte en le décalant en dehors de notre vue.

.control {
  display:block;
  width:39px;
  height:263px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top:0;
  left:0;
  background:transparent url(img/control_left.jpg) no-repeat 0 0;
}
#rightControl {
  top:0;
  right:0;
  background:transparent url(img/control_right.jpg) no-repeat 0 0;
}

Etape 4: La meilleure partie... le Javascript

Maintenant que notre HTML et CSS sont en place, il est temps de passer aux choses plus amusantes. Nous utiliserons la libraire jQuery pour rendre notre slideshow plus interactif et animé (et surtout car le développeur est une personne qui n'aime pas trop se fatiguer).

La théorie

La première chose qu'il va falloir faire, c'est « désactiver » les styles CSS qui tiennent compte de la désactivation du Javascript. Cela implique de déclarer des styles CSS dans le Javascript pour la div #slideContainer afin de supprimer la barre de défilement. De plus, il va falloir redimensionner les div .slide de 560px, que nous avions réduit de 20px pour laisser la place à la barre de défilement. Il faut également mettre les divs en float left afin qu'elles soient afficher côté à côté horizontalement au lieu d'etre les unes sous les autres.

Enfin, avec la manipulation du DOM, on va insérer une div appellée #slideInner qui va englober tout nos slides et qui aura une largeur égale à la largeur totale de toutes les div ayant la classe .slide.

Finalement, on insère les flèches droite et gauche de navigation (avec une classe .control); on fera ça en Javascript afin que les utilisateurs n'ayant pas le Javascript d'activer ne puissent pas voir ces flèches.

Voici le code Javascript en entier, et après nous allons voir en détails à quoi correspondent chaque partie de code.

$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 560;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Supprime la scrollbar en JS
  $('#slidesContainer').css('overflow', 'hidden');

  slides
  .wrapAll('<div id="slideInner"></div>')
  // on met tous les slides en float:left pour qu'il s'affichent de manière horizontale
  .css({
    'float' : 'left',
    'width' : slideWidth
  });

  // La longueur de #slideInner équivaut à la somme de la longueur de tous les slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert les flèches de gauche et de droite
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Move left</span>')
    .append('<span class="control" id="rightControl">Move right</span>');

  // Cache la flèche de gauche au début
  manageControls(currentPosition);

  // crée un écouteur pour l'évènement de type clic sur les div qui ont la classe .control
  $('.control')
    .bind('click', function(){
    // Determine une nouvelle position
      currentPosition = ($(this).attr('id')=='rightControl')
    ? currentPosition+1 : currentPosition-1;

      //Cache ou montre les flèches
      manageControls(currentPosition);
      // Move slideInner using margin-left
      $('#slideInner').animate({
        'marginLeft' : slideWidth*(-currentPosition)
      });
    });

  // manageControls: Cache ou montre les flèches de contrôles en fonction de la position
  function manageControls(position){
    // Hide left arrow if position is first slide
    if(position==0){ $('#leftControl').hide() }
    else{ $('#leftControl').show() }
    // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() }
    else{ $('#rightControl').show() }
    }
  });

Créer des variables

Premièrement, on initialise au début du script des variables qui seront utilisées tout au long de ce script.

• CurrentPosition sera un nombre qui contiendra la position actuelle du slideshow.
• SlideWidth est la largeur de chaque div .slide, qui est fixée à 560px.
  
• Slides : Il a été décidé de déclarer un objet « slides » qui correspond à la sélection $('.slide') en jQuery, afin que le code soit plus propre. Mais il est tout à fait possible d'utiliser ($('.slide'))  dans votre syntaxe.
• numberOfSlides : Finalement, on détermine le nombre de slides dans notre slideshow en utilisant la méthode .length.

var currentPosition = 0;
var slideWidth = 560;
var slides = $('.slide');
var numberOfSlides = slides.length;

Supprimer la barre de défilement

Si notre script s'éxécute, alors notre utilisateur à bien le Javascript d'activer – on peut donc supprimer la barre de défilement en mettant la propriété overflow en 'hidden' ce qui écrasera le overflow:auto déclaré précédement dans notre CSS.

$('#slidesContainer').css('overflow', 'hidden');

Insérer un div dans le DOM

Nous allons utiliser la propriété margin pour faire bouger nos slides de gauche à droite (nous verrons cela en détail après). Pour ce faire, nous avons besoin de créer une div qui va contenir toutes les divs .slides, avec une largeur égale au total de la largeur de nos slides. En ajustant la propriété margin de cette div, nous allons créer l'effet de mouvement horizontal. La méthode utilisée va être wrapAll

slides
  .wrapAll('<div  id="slideInner"></div>')

Il faut également donner une largeur à #slideInner, la nouvelle div que l'on a créée, en lui attribuant la largeur totale de toutes les divs .slide.

$('#slideInner').css('width', slideWidth * numberOfSlides);

Styler les slides en Javascript

Avec le Javascript activé, nous voulons que les slides soient affichées horizontalement pour qu'elles soient côté à côté. Nous voulons également leur donner une largeur de 560px vu que il n'y aura pas de barre de défilement horizontale. Nous pouvons combiner la méthode jQuery .css avec .wrapAll() que nous utilisons dans le code précédent

slides
  .css('overflow', 'hidden')
  .wrapAll('<div  id="slideInner"></div>')

Insérer les flèches de navigation dans le DOM

On va insérer ces flèches en manipulant le DOM; de cette façon, les utilisateurs qui utiliseront des navigateurs ne gérant pas le Javascript ainsi que les « lecteurs d'écran' » n'auront pas de structure HTML non valide avec des flèches de navigation qui les emmèneraient nul part, car cliquer sur celle-ci ne pourrait fonctionner sans le Javascript.

Nous allons faire ça en utilisant les méthodes .prepend() et .append() qui permettent d'insérer une balise HTML dans un objet sélectionné (dans notre cas, la div #slideshow est sélectionnée). Le texte à l'intérieur des balises span n'est pas important, car il a été caché en CSS.

$('#slideshow')
  .prepend('<span class="control" id="leftControl">Moves left</span>')
  .append('<span class="control" id="rightControl">Moves right</span>');

Gérer les flèches de navigation droite et gauche avec une fonction

Gérer les flèches de navigation droite et gauche avec une fonction Pour gérer nos flèches, on va créer une fonction appellée manageControls qui va cacher et afficher les flèches en fonction de la position courant du slideshow. Si l'on se trouve sur le premier slide, on va cacher la flèche de gauche car il n'y a aucun slide précédent à afficher. De même lorsque l'on arrive à la fin, le slideshow va revenir automatiquement au début.
Nous faisons ça en utilisant les méthodes jQuery .hide() et .show() qui permettent de cacher/montrer les éléments du DOM sélectionnés.

function  manageControls(position){
  // position==0 is first slide
  if(position==0)  { $('#leftControl').hide(); }
  else { $('#leftControl').show(); }
    // numberOfSlides-1 is last slides
  if(position==numberOfSlides-1) {  $('#rightControl').hide(); }
  else { $('#rightControl').show(); }
}

Appeller manageControls() lorsque le DOM est prêt

Lorsque le premier script se charge, il nous faut appeler la fonction manageControls() une fois pour cacher la flèche de gauche. Il suffit simplement de passer en argument currentPosition dans lequel il y aura la valeur 0 intiale.

manageControls(currentPosition);

Tenir compte des événements de clic sur les flèches

L'étape finale dans le script du slideshow est de tenir compte des événements de clic sur les flèches de gauche et droite. Nous allons pour cela mettre en place des « écouteurs d'événements » qui permettent l'exécution d'une fonction lorsque l'utilisateur clique sur l'une des deux flèches.

$('.control').bind('click',  function(){
  // do something when user clicks
});

Mettre à jour la valeur de currentPosition

Lorsque l'utilisateur clique sur une flèche, on met à jour la valeur de la variable currentPosition: si l'utilisateur clic sur la flèche de droite (qui a l'ID #rightControl) alors on incrémente de 1 notre currentPosition; si l'utilisateur clique sur la flèche de gauche (qui a l'ID #leftControl), alors on enlève 1 à notre variable currentPosition. Ce que l'on vient de faire s'appelle une opération ternaire, qui est un raccourci de l'utilisation des structures if/else.

currentPosition = ($(this).attr('id')=='rightControl')
                     ?  currentPosition+1 : currentPosition-1;

Appeller manageControls() après la mise à jour de currentPosition

Après avoir ajusté la valeur de currentPosition, on appelle la fonction manageControls() à nouveau afin de cacher ou montrer les flèches en fonction de notre nouvelle position de slide.

manageControls(currentPosition);

Animer ses slides

Pour finir, on déplace #slideInner vers la gauche ou la droite en animant la valeur de la propriété CSS margin-left. La marge de gauche est la largeur négative de nos slides multiplié par la position courrante. Par exemple, si l'on se déplace au Slide n°3, alors notre marge de gauche est égale à -1120px.

$('#slideInner').animate({
  'marginLeft' : slideWidth*(-currentPosition)
});

Voilà, le tuto de SixRevisions, maintenant si vous restez sur votre faim vous pouvez le continuer avec les améliorations que nous avons apporté.

Les améliorations

Nous allons maintenant traiter de plusieurs cas de figure qui peuvent être intéressant à développer :

• Retour automatique au premier slide lorsque l'on arrive sur le dernier et que l'on veut aller au suivant
• Diaporama avec un bouton Lecture/Pause
• Lancement automatique du diaporama
• Afficher ou non les boutons Lecture/Pause

Par ailleurs, nous ferons en sorte que tous ces paramètres soient facilement modifiables au début du script.

Variables supplémentaires:

                 //Config
		  var retour = true;
		  var tempsTransition = 1000;
		  var affichePlayPause = true;
		  var lectureAutomatique = false;
		  	var tempsAttente = 6000;
			
		  var icones = new Array();
		  		icones['play'] = 'img/play_slider.png';
		  		icones['pause'] = 'img/pause_slider.png';	
		  var interval;
		  var lectureEnCours = false;	

• retour indique si le slide tourne en boucle ou pas.
• tempsTransition correspond à la durée en millisecondes de la transition
• affichePlayPauseindique si l'on doit afficher ou pas les boutons de lecture et de pause.
• lectureAutomatique indique si le diaporama dés le chargement du DOM.
• tempsAttente correspond au temps en millisecondes entre chaque slide en mode "diaporama".
• icones est un tableau multi-dimensionnel comprenant le lien des icônes.
• interval Correspond à la variable qui sera utilisée lors du diaporama
• lectureEnCours est une variable qui nous dira dans quel "mode" de lecture on est (manuel ou automatique)

Le fait de déclarer ces variables permet entre autre de rendre le fichier Javascript beaucoup plus propre, mais surtout ca vous facilitera la tâche si un jour vous souhaitez basculer en mode manuel ou bien pour changer le temps de transition, ca évite de se noyer dans le code (même s'il n'est pas vraiment énorme dans ce cas précis).

La première chose que nous allons faire sera de définir 3 fonctions: "suivant,start et pause". Ceci nous permettra de gérer le changement de slides de manière automatique.

function start() {
  	lectureEnCours = true;
        interval = setInterval(suivant, tempsAttente );
}

function suivant(){
	$('#rightControl').click();
}

function pause() {
  	lectureEnCours = false;
        clearInterval(interval);
}

Les fonctions start et pause modifient la variable booléènne lectureEnCours. Pour permettre d'éxécuter une fonction toutes les x secondes, il est nécessaires de se reposer sur la fonction setInterval prenant en premiere paramètre le nom de la fonction, puis en second, le temps entre chaque éxécution. La fonction clearInterval permet quant à lui de stopper ce processus et prend en paramètre la variable qui a été attribuée au setInterval. Enfin la fonction suivant crée un évènement (qui ici est un clic) sur le bouton suivant.

Maintenant que les fonctions de base sont réalisées, nous allons lancé le diaporama, ainsi en dessous de ces 3 fonctions vous pouvez écrire:

 //Si le diapo est activé 
if(lectureAutomatique == true){
  start();
}

Boutons Lecture/Pause

Si la variable affichePlayPause équivaut à true, nous allons rajouter au DOM, une image de controle supplémentaire:

if(affichePlayPause == true){
	$('#slidesContainer').prepend('<img id="navDiapo" src="" alt="Navigation diaporama" />');
	if(lectureAutomatique == true){
		$('#navDiapo').attr('src',icones['pause']);
	}else{
		$('#navDiapo').attr('src',icones['play']);	
	}
	$('#navDiapo').bind('click', function(){
		if(lectureEnCours == true){
			$(this).attr('src',icones['play']);
			pause();
		}else{
			$(this).attr('src',icones['pause']);
			start();
		}
	});
}

Les fonctions vues là, ont déjà été utilisé précédemment, je ne reviendrais donc pas sur leur utilisation. Ici nous ajoutons juste une image au DOM puis nous lui attribuons un attribut src qui diffère selon l'état de la variable lectureEnCours. Enfin, nous lui ajoutons un écouteur sur l'évènement click. Aller et voici la CSS pour bien positionner cette icône

#navDiapo{
	display:block;
	width:20px;
	height:20px;
	position:absolute;
	right:25px;
	bottom:10px;
	cursor:pointer;
}

Gestion du retour automatique

Allez dernière ligne droite, tout d'abord il va falloir retoucher à la fonction manageControls, oui car si on autorise le retour automatique, cela a des répércussions sur l'affichage de la flèche de droite...

 // manageControls: Cache ou montre les flêches de controle en fonction de la position courante
  function manageControls(position){
    // Cache la fleche "précédent" si on est sur le premier slide
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Cache la fleche "suivant" si on est sur le dernier slide (et que le retour automatique n'est pas activé)
    if(position==numberOfSlides-1 && retour == false){
		$('#rightControl').hide();
	} else {
		$('#rightControl').show();
	}
	if(position == numberOfSlides && retour == true){
		currentPosition = 0;
		 $('#leftControl').hide();
	}
  }

Voilà comment on repart à 0, on teste tout simplement si la position équivaut à celle du dernier slide, auquel cas on modifie la valeur de currentPosition à 0. Il ne reste maintenant plus qu'à ajouter 3 lignes de code dans la fonction qui est éxécutée lors du clic sur un des contrôles et ca donne ceci:

//Crée un écouteur d'évènement de type clic sur les classes .control
  $('.control')
    .bind('click', function(){
		
    // Determine la nouvelle position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    
	if(currentPosition == numberOfSlides && retour == false ){
		currentPosition--;
		pause();
	}
	
	// Cache ou montre les controles
    manageControls(currentPosition);
    // Fais bouger le slide
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    },tempsTransition);
  });

Voilà, et n'oubliez pas de changer le temps de transition dans la méthode animate de jQuery, c'est en fait le 2ème paramètre.

Résumé

Dans ce tutoriel, nous avons crée un script de slideshow simple en utilisant du bon code HTML, CSS et Javascript (jQuery). Nous avons tenu compte du principe d'accessibilité pour être sûr que notre slideshow fonctionne sans CSS et Javascript, ce qui rend notre script accessible dans la plupart des navigateurs.

La 2ème partie a permis d'ajouter quelques fonctionnalités intéressantes et de paramétrer ce petit script. A bientôt pour de nouveaux tutos, et n'oubliez pas qu'il y'aura une suite à ce tuto, sur la gestion en PHP/SQL/Ajax d'un slider dans une partie admin.

N'hésitez pas à laisser des commentaires pour vos remarques, astuces, conseils, améliorations, et soutien moral :)