apparition d'une galerie js après clic sur une image

Bonjour,

J'élabore mon portfolio pour mon book et j'aurais besoin de votre aide.

Pour faire simple :

J'ai une liste de projets sur une page.
Pour l'instant en cliquant sur un projet, il y a une page web qui s'ouvre avec un script js affichant une galerie d'images relatives au projet ainsi que son descriptif.

L'inconvénient de ce système est que je crée une page web par projet. Ce qui fait très lourd.

Ce que j'aimerais faire c'est que lorsqu'on clique sur un projet, il y ait une sorte de 'popup' qui affiche ma galerie d'images avec son descriptif.

Pourriez vous m'aider à réaliser cela ?

N'hésitez pas à poser des questions si je n'ai pas été claire
Merci Beaucoup

- Placer en page HTML un lien de chaque coté du DIV "scene".
(Un lien "Avant" et un lien "Arrière")

Code:

---

1 2 3 4 5

<div id="cadre"> <div class="explore" id="avant" onclick="javascript:index++;affiche(index)"></div> <DIV id="scene"></div> <div class="explore" id="arriere" onclick="javascript:index--;affiche(index)"></div> </div>

---

- Parametrer la "scene" en caché.

Code:

---

1 2 3 4 5 6 7 8 9

#scene { position:relative; float:left; margin-left:5px; margin-right:5px; width:300px; /* mettre la largeur d'une photo. */ width:300px; /* mettre la hauteur d'une photo. */ }

---

- Parametrer le cadre de la scene.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

#cadre { position: absolute; display:none; width:710px; /* largeur "avant"+largeur "scene"+largeur "arriere"+ les margins */ left:?px; /* remplacer ? par la position horizontale du cadre. top:?px; /* remplacer ? par la position verticale du cadre. text-align:center; }   .explore { position: relative; width:200px; text-align:center; background-image:url(nom de ton image de texture); /* taille de 32x32 pixels */ }

---

- Déclarer une variable index pour la lecture des images
var index=0;

- Faire apparaitre le DIV "cadre".

Code:

---

document.getElementById("cadre").style.display="block";

---

- Créer un tableau nommé "projet" et contenant les url de tes photos.

Code:

---

1 2 3 4 5 6

var urls=new Array(); var projet=new Array(); projet[0]=urls("url1","url2","url3"); // Mettre les url du projet 0 projet[1]=urls("url1","url2","url3"); // Mettre les url du projet 1 projet[2]=urls("url1","url2","url3"); // Mettre les url du projet 2 projet[3]=urls("url1","url2","url3"); // Mettre les url du projet 3

---

- Le click sur le projet 1 doit doit faire choix=1.

Code:

---

onclick="javascript:choix=1;"

---

(Idem pour chaque projet avec son numéro).

Code:

---

onclick="javascript:choix=2;"

---

etc...

- Le lien "Avant" va sélectionner l'image suivante dont l'url est contenue dans le tableau "projet".
- Le lien "Arrière" doit sélectionner l'image précédente dont l'url est contenue dans le tableau "projet".

- La fonction pour changer l'image dans la "scene".

Code:

---

1 2 3 4

function affiche(index) { document.getElementById("scene").backgroundImage=projet[index]; }

---

Bon je t'ai indiqué ça à l'arrache, je sais même pas si ça marche ;)
Teste et dis ce qui va pas ;)

Ne fait pas de copier/collé de tout ça, place les codes là où il faut hein^^