le Journal du Floyd

Une boite magique en Javascript

l auteur de ce journal

Ce n' est pas vraiment un tutoriel, juste des conseils pour débutants. Sérieusement, voilà, j' ai un blog photo, et quand je clique sur une image, je veux la voir en plus grand, au centre de la page et assombrir le reste de la page. Ah euh, Jquery alors? Bah tiens ça bouffe pas de ressources, hein? Frustrant de ne rien comprendre aussi. En plus une boite magique pour un blog, c' est juste 30 lignes de code. Ah, vraiment? Démonstration :
entre les balises <head> j' insère déjà mon script de la mort: <script src="js/boitealumiere.js" type="text/JavaScript" ></script>. Occupons-nous d'abord de la balise image. A l' origine, nous avons ceci: <img src="image/monimage.jpg" alt="description" />. Nous allons rajouter quelques attributs utiles. Tout d'abord un nom, donc name="un titre à la photo" la largeur et la hauteur donc width="300" et height="200". Les nombres sont indicatifs, tu mets ce que tu veux. Nous allons maintenant faire appel à Javascript, et sa gestion des évenements. Un onclick qui appelle une fonction. Donc onclick="ouvreboite()". Je passe en paramètres des infos utiles. Donc comme ceci: onclick="ouvreboite(this.name,this.src,this.width,this.height)". Le mot-clé "this"...Je ne rentre pas dans le sujet, sinon mon article va finir en livre. La balise image ressemble à ça maintenant:

<img src="image/monimage.jpg" alt="description" name="un titre à la photo" width="300" height="200" onclick="ouvreboite(this.name,this.src,this.width,this.height)" />

Nous allons maintenant coder le script boitealumiere.js où nous allons retrouver la fonction ouvreboite() et ses paramètres. Tout d' abord déclarer ses variables, la portée est donc globale. Pas une obligation pour toutes les variables, ici, c' est pour l'exemple.

var boite = false;
var cssBoite = false;
var cssBoiteLink;
var boiteDiv;
var boiteOverlay;

Une variable boite à false, elle est pas encore là la boite, donc pour l' instant, c'est false. Pas de CSS existant encore pour la boite, donc false également. C' est bon, tout le monde suit? Bien, on insère la fonction du CSS pour la boite, on appellera la fonction plus tard:

function csslink() {
if (!cssBoite) {
cssBoiteLink = document.createElement("link");
cssBoiteLink.setAttribute("type" , "text/css");
cssBoiteLink.setAttribute("rel" , "stylesheet");
cssBoiteLink.setAttribute("href" , "boite.css");
currentHead = document.getElementsByTagName("head");
currentHead[0].appendChild(cssBoiteLink);
cssBoite = true;
}
}

Je fabrique le lien que j' insère entre les balises <head>. Pourquoi cette histoire de css Boite true ou false. Ben, réfléchis. J' ouvre, je ferme la boite, j' ouvre, je ferme, et puis j' insère le CSS combien de fois? Une seule fois suffit. C'est pour cette raison que la variable est passé à true en fin de fonction. Lors d' une deuxième ouverture, la condition ne sera plus remplie, le CSS étant déjà inséré. Bon, la fonction ouvreboite maintenant? Tadaaaaaa:

function ouvreboite(title,imgName,width,height) {
if (!boite) {
csslink();
boiteOverlay = document.createElement("div");
boiteOverlay.id = "boiteOverlay";
currentBody = document.getElementsByTagName("body");
currentBody[0].appendChild(boiteOverlay);
boiteOverlay.onclick = function()
{
fermeboite();
}
boiteDiv = document.createElement("div");
boiteDiv.id = "boiteElement";
boiteDiv.className = "BoiteElement";
var boiteTitle = document.createElement("h1");
boiteTitle.id = "boitetitle";
boiteTitle.innerHTML = title;
boiteDiv.appendChild(boiteTitle);
currentBody[0].appendChild(boiteDiv);
boiteDiv.onclick = function()
{
fermeboite();
}
var boiteIconClose = document.createElement("img");
boiteIconClose.id = "buttonclose";
boiteIconClose.setAttribute("src","image/close.png");
boiteDiv.appendChild(liteBoxIconClose);
var boiteImage = document.createElement("img");
boiteImage.id = "imageDisplay";
boiteImage.setAttribute("src",imgName);
boiteDiv.appendChild(boiteImage);
boite=true;
}
}

Analyse. La boite est à false, donc je la construis. Je lance la fonction CSS pour lier la mise en forme. Je place un DIV Overlay qui va couvrir l'ensemble. Je place le div entre les balises <body>. Le fameux appendChild. Un deuxième DIV qui va contenir l' image et le titre. Il y a aussi un bouton, un "close". Nous observons aussi un appel à une fonction fermeboite déclenchée au click. Bah oui, j'ai ouvert la boite, maintenant faut la fermer. Attention où tu insères les DIV ou les différents éléments que tu veux créer. Il faudra en tenir compte pour le fermeboite. Ici, je ne me sers pas des paramètres width et height, je laisse libre court à ton imagination. Perso, je m' en suis servi pour reconnaître les formats des images et changer le format de ma boite magique. Je n'appelle pas la fonction sur le bouton close. Non, ce n'est pas un oubli. Juste un leurre, y a un truc que j' explique plus loin. Je mets boite à true (non, ce n'est pas sexuel, pffff). Une fois ouverte, je ne peux pas l' ouvrir une seconde fois. Logique, non? Bon, le code du fermeboite:

function fermeboite() {
var boiteFrame = document.getElementById("boiteOverlay");
var boiteContainer = document.getElementById("boiteElement");
boiteContainer.parentNode.removeChild(boiteContainer);
boiteFrame.parentNode.removeChild(boiteFrame);
boite=false;
}

Rien d' extraordinaire, je recherche mes éléments, je les fais disparaître et je remets la boite à false pour permettre à l' utilisateur de pouvoir rouvrir une boite magique au cas où il aurait pas bien vu la première fois. Côté Javascript, c'est fini. Maintenant, reste le CSS qui va avec:

#boiteOverlay {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background-color:#000000;
background-color:rgba(0,0,0,0.80);
filter:alpha(opacity=80);
z-index:100;
}

Le DIV qui couvre, donc 100% sur la largeur et la hauteur, positionné à partir du haut et de la gauche, un z-index qui permet au DIV de passer "par-dessus". A remarquer la manière dont le background est ici géré pour permettre un affichage correct sur tous les navigateurs. Bon le DIV qui contient l'image:

#boiteElement {
width:400px;
height:640px;
position:fixed;
left:50%;
top:50%;
margin-left: -200px;
margin-top: -320px;
z-index:200;
background-color:#50FFFF;
border-radius:10px 10px 0px 0px;
}

Mon image à la base ne faisait pas 200x300 mais bien 400x600. Elle ne s' est pas agrandie, elle était réduite sur la page d'origine. Cette solution est économe en ressources puisque je n'ai pas besoin de charger une deuxième image. La position est fixée, dans le cas où la page d' origine a déjà un ascenceur pour scroller. les 40 pixels supplémentaires sont pour le titre. Des coins arrondis en haut pour faire joli, la couleur du fond rappellera les lointaines iles du Sud de tes prochaines vacances. Libre à toi de rajouter une mise en forme pour le titre. Il nous reste le bouton close à voir:

#buttonclose {
position:absolute;
top:10px;
right:10px;
cursor:pointer;
}

le cursor pointer est le truc qui donne l' impression à l' utilisateur qu' il clique sur le bouton alors qu' il clique sur le DIV. Oui, c' est une tromperie sur la marchandise mais j' insiste encore une fois, merci de faire attention et de bien penser à ce qui va se passer ou pourrait se passer lorsque l' utilisateur clique à un endroit ou un autre. Il ne faut jamais laisser la moindre chance à l' utilisateur moyen. Il faut toujours tester sur tous les navigateurs, versions récentes comme les anciennes. Besoin de voir ce que cela donne? Ben clique là :
un exemple sur le site.
Cette technique de boite magique peut aussi être utilisée pour autre chose qu'une photo. A toi d' être créatif, d' essayer cette méthode, pourquoi pas de la développer. Si tu as des questions même idiotes, c' est possible de me contacter. Bonne chance et bon courage.