Mise en pratique images
Nous allons rapidement voir une petite mise en pratique de l'objet Image en réalisant une Lightbox très simple. Le principe d'une Lightbox est de permettre l'affichage d'une image en taille réelle directement dans la page Web où se trouvent les miniatures de toutes nos images.
La mise en pratique qui va suivre nécessite de posséder quelques images pour tester les codes que nous allons fournir. Plutôt que de vous embêter à chercher des images, les redimensionner puis les renommer, vous pouvez utiliser notre pack d'images toutes prêtes que vous
Commençons tout d'abord par un code HTML simple pour lister nos miniatures et les liens vers les images originales :
<p>
<a href="imgs/1.jpg" title="Afficher l'image originale"><img src="imgs/1_min.jpg" alt="Miniature" /></a>
<a href="imgs/2.jpg" title="Afficher l'image originale"><img src="imgs/2_min.jpg" alt="Miniature" /></a>
<a href="imgs/3.jpg" title="Afficher l'image originale"><img src="imgs/3_min.jpg" alt="Miniature" /></a>
<a href="imgs/4.jpg" title="Afficher l'image originale"><img src="imgs/4_min.jpg" alt="Miniature" /></a>
</p>
Notre but ici est de bloquer la redirection des liens et d'afficher les images d'origine directement dans la page Web, plutôt que dans une nouvelle page. Pour cela, nous allons devoir parcourir tous les liens de la page, bloquer leurs redirections et afficher l'image d'origine une fois que celle-ci aura fini d'être chargée (car une Lightbox est aussi conçue pour embellir la navigation).
Normalement, de nombreux autres paramètres entrent en compte pour la réalisation d'une Lightbox, comme la vérification de l'existence d'une miniature dans un lien. Ici, nous faisons abstraction de ces vérifications ennuyeuses et allons à l'essentiel. Gardez bien à l'esprit que le script que nous réalisons ici n'est applicable qu'à l'exemple que nous sommes en train de voir et qu'il serait difficile de l'utiliser sur un quelconque site Web.
Commençons par parcourir les liens et bloquons leurs redirections :
var links = document.getElementsByTagName('a'), linksLen = links.length;
for (var i = 0 ; i < linksLen ; i++) {
links[i].onclick = function() { // Vous pouvez très bien utiliser le DOM-2 displayImg(this); // On appelle notre fonction pour afficher les images et on lui passe le lien concerné return false; // Et on bloque la redirection };
} |
Vous pouvez constater que nous faisons appel à une fonction displayImg() qui n'existe pas, nous allons donc la créer !
Que doit donc contenir notre fonction ? Il faut tout d'abord qu'elle commence par charger l'image originale avant de l'afficher, commençons par cela :
function displayImg(link) {
var img = new Image();
img.onload = function() { // Affichage de l'image };
img.src = link.href;
} |
Avant de commencer à implémenter l'affichage de l'image, il nous faut tout d'abord mettre en place unoverlay. Mais qu'est-ce que c'est ? En développement Web, il s'agit généralement d'une surcouche sur la page Web, permettant de différencier deux couches de contenu. Vous allez vite comprendre le principe quand vous le verrez en action. Pour l'overlay, nous allons avoir besoin d'une balise supplémentaire dans notre code HTML :
<div id="overlay"></div> |
Et nous lui donnons un style CSS afin qu'il puisse couvrir toute la page Web :
#overlay { display : none; /* Par défaut, on cache l'overlay */
position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; /* Pour centrer l'image que l'overlay contiendra */
/* Ci-dessous, nous appliquons un background de couleur noire et d'opacité 0.6. Il s'agit d'une propriété CSS3. */ background-color: rgba(0,0,0,0.6); } |
Maintenant, le principe va être d'afficher l'overlay quand on cliquera sur une miniature. Il faudra aussi mettre un petit message pour faire patienter le visiteur pendant le chargement de l'image. Une fois l'image chargée, il ne restera plus qu'à supprimer le texte et à ajouter l'image originale à la place. Allons-y !
function displayImg(link) {
var img = new Image(), overlay = document.getElementById('overlay');
img.onload = function() { overlay.innerHTML = ''; overlay.appendChild(img); };
img.src = link.href; overlay.style.display = 'block'; overlay.innerHTML = '<span>Chargement en cours...</span>';
} |
Voilà, notre image se charge et s'affiche, mais il nous manque une chose : pouvoir fermer l'overlay pour choisir une autre image ! La solution est simple, il suffit de quitter l'overlay lorsque l'on clique quelque part dessus :
document.getElementById('overlay').onclick = function() { this.style.display = 'none'; }; |
Il ne nous reste plus qu'à ajouter un petit bout de CSS pour embellir le tout, et c'est fini :
#overlay img { margin-top: 100px; }
p { margin-top: 300px; text-align: center; } |
Et voilà ! Notre Lighbox ultra-minimaliste est terminée !
Vous pouvez essayer le script ici ! Nous vous redonnons les codes complets si vous souhaitez travailler dessus :
<p> <a href="imgs/1.jpg" title="Afficher l'image originale"><img src="imgs/1_min.jpg" alt="Miniature" /></a> <a href="imgs/2.jpg" title="Afficher l'image originale"><img src="imgs/2_min.jpg" alt="Miniature" /></a> <a href="imgs/3.jpg" title="Afficher l'image originale"><img src="imgs/3_min.jpg" alt="Miniature" /></a> <a href="imgs/4.jpg" title="Afficher l'image originale"><img src="imgs/4_min.jpg" alt="Miniature" /></a> </p>
<div id="overlay"></div> |
#overlay { display : none; /* Par défaut, on cache l'overlay */
position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; /* Pour centrer l'image que l'overlay contiendra */
/* Ci-dessous, nous appliquons un background de couleur noire et d'opacité 0.6. Il s'agit d'une propriété CSS3. */ background-color: rgba(0,0,0,0.6); }
#overlay img { margin-top: 100px; }
p { margin-top: 300px; text-align: center; } |
var links = document.getElementsByTagName('a'), linksLen = links.length;
for (var i = 0 ; i < linksLen ; i++) {
links[i].onclick = function() { // Vous pouvez très bien utiliser le DOM-2 displayImg(this); // On appelle notre fonction pour afficher les images return false; // Et on bloque la redirection };
}
function displayImg(link) {
var img = new Image(), overlay = document.getElementById('overlay');
img.onload = function() { overlay.innerHTML = ''; overlay.appendChild(img); };
img.src = link.href; overlay.style.display = 'block'; overlay.innerHTML = '<span>Chargement en cours...</span>';
}
document.getElementById('overlay').onclick = function() { this.style.display = 'none'; }; |
Comme nous vous l'avons précisé plus tôt, ce script est actuellement inutilisable sur un site en production. Cependant, si vous souhaitez améliorer ce code afin de le publier, nous vous conseillons d'étudier ces quelques points :
Créé avec HelpNDoc Personal Edition: Générer des livres électroniques EPub facilement