Discussion :

[paulinehache]

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

[dragonno]

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

onclick="javascript:choix=1;"

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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^^