Version finale de ma lightbox qui fonctionne :  
HTML : http://pastebin.com/5DZbVH2V
JavaScript : http://pastebin.com/2YYEhTbx
CSS : http://pastebin.com/MD3wJmT5
A modifier comme vous voulez.
Petite description de son fonctionnement :  
Dans le HTML on met le chemin vers une image qui sera affichée et derrière on met une fonction et on passe en paramètre une image à afficher lorsqu'on clique sur la première et on rajoute un titre.
Lorsqu'on clique l'image sera affichée dans une lightbox qui s'ouvrira au centre de la page (à régler vous même car ça bouge selon la taille des images). Sous cette lightbox il y aura un rectangle (gris si vous modifiez pas la couleur) avec le titre que vous aurez passé en paramètre à la fonction dans le HTML.
Code adapté pour les images à taille fixe, si c'est pas le cas chez vous il faudra vous débrouiller
 
Mon site : http://www.fan-de-mixmaster.legtux.org/
Lightbox mise en place sur toutes les images dans la partie "screenshots" dès demain soir.
 
Bonsoir,
 
J'avais trouvé un code de lightbox en javascript uniquement mais celui-ci ne fonctionnait pas comme il faut sous internet explorer. J'ai alors pris un code css + javascript et ça fonctionne correctement sauf qu'il y a deux une choses que je ne sais pas comment faire mais le résultat voulu pour ce qui est codé est le bon.
 
Tout d'abord, voici la page :  
 
http://www.fan-de-mixmaster.legtux.org/html.html
 
C'est une page de test, les autres pages de screenshots ne fonctionnent pas avec ce nouveau système de lightbox, j’attends que la page html.html fonctionne à 100 % avant de le mettre partout.  
 

• Premier problème : RESOLU

Le CSS que j'ai écris :  
 #screenshots
 {
 text-align: center;
 }
 
Le HTML j'ai laissé tel quel avec la div screenshot sauf que j'en ais mis 2 avec seulement 2 images à l'intérieur d'une balise.
 
Au moins maintenant je sais comment affecter un code CSS à l'id d'une div en html
 
 
J'arrive absolument pas à centrer les images. J'aimerais juste que le css centre les images deux par deux. Les espaces entre les lignes de 2 images seront faits avec des br car parfois il y en aura, parfois pas.
 
Voilà le bout de code html :  
 
 

 
Voilà le bout de code CSS :
 

• Deuxième problème :  RESOLU !!!

J'ai fais ce que j'avais pas envie de faire hier, j'ai retéléchargé le code original de la lightbox et j'ai modifié un truc après l'autre pour voir à quel moment ce rectangle apparaît lors du chargement de la page.  
En faite pour tester un truc hier j'avais modifié le display: none; en display: table-cell; du coup rien ne bloquait le CSS lors d'un chargement de la page sans clique sur une image. J'ai alors remis le display: none; dans la partie "#box" de mon CSS et le rectangle a disparu.  
Donc, mon deuxième problème n'en est plus un. Je vous laisse tout de même tout ce que j'avais écris au cas où un jour quelqu'un a le même problème.
 
En résumé, display: none; permet d'empêcher l'affichage ... si j'aurais sus ... c'était tellement évident.  
 
Une fois que mon code est près je le met sur mes vraies pages (html.html est une page de test) et je le mettrais je ne sais où pour que d'autres puissent l'utiliser.  
A la base dans le rectangle sous l'image si on clique il y avait le chemin vers le fichier, pas très esthétique. J'ai alors modifié le javascript afin de passer un titre personnalisé en paramètre à la fonction et ... ça fonctionne
 
 
A chaque fois que je vais sur la page ou que je l'actualise (à chaque rechargement de la page) il y a un rectangle gris qui apparait en haut de ma page. Si je clique sur une image et que je referme la lightbox ce rectangle a disparu.
En faite, c'est un bout de code qui s’exécute alors qu'il ne devrait pas encore :  
 

 
Après avoir cherché un peu, c'est le design du boxtitle qui se met à chaque rechargement.
 
J'ai essayé de marquer  :
 

 
Mais ça s'affiche quand même sauf qu'il n'y a pas de texte dans le rectangle.
 
J'ai absolument besoin de ce bout de code car si je le modifie ou le supprime, ma lightbox ne s'ouvre plus. En faite dans mon HTML je passe en argument de la fonction openbox deux choses : l'image et le titre. L'image est affichée dans la lightbox et le titre se met en dessous avec le design de la fonction boxtitle qui se trouve dans le CSS. Dans le fichier javascript il y a cette fonction openbox qui se charge d'assembler l'image et le titre.  
 
Voici le code html en entier : EFFACE
 
Voici le code CSS en entier : EFFACE
 
Voici le code JavaScript en entier : EFFACE
 
Pour le deuxième problème, je sais qu'il faudra certainement modifier un peu le code, c'est pas grave mais j'aimerais vraiment pas changer de système de lightbox car le CSS est très simple à comprendre pour moi donc le modifier est très rapide et l'adapter aux différents navigateurs également.
 
Comme vous le voyez, c'est un site personnel et j'y ais déjà passé énormément de temps à régler différents problèmes.
Croyez moi, avant de vous demander j'ai longtemps cherché.
J'imagine que c'est pas très compliqué mais je ne trouve vraiment pas.
 
Merci beaucoup de jeter un coup d'oeil.
 
 
PS :
 
- La fenêtre de lightbox n'est pas forcément bien centrée, je m'en occuperais plus tard.
 
- J'ai mis deux fois la même image, c'est normal c'est une page de test.