galerie photo

**pygoCENTRUS** · 18/05/2008, 19h11

salut a tous

j'ai un petit soucis avec un code pour faire défiler des images grâce a des boutons.

mon probleme est que mes images s'affichent l'une en dessous de l'autre (en liste) du coup les boutons ne servent a rien et la page fait 30km de long.

comment faire pour qu'elles s'affichent une par une en utilisant les boutons?
pouvez vous m'indiquer ou mettre l'adresse des images svp?

voici le code de base

Code :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html>
<head>
<title> Images défilante </title>
<script type="text/javascript">
var Num_Image = 1
var Max_Image = 4
//-----------------------
function ShowImage( inc_){
  //-- Recup de l'objet
  var O_Img = document.images['PHOTO'];
  //-- Gestion des Bornes
  Num_Image += inc_;
  if( Num_Image < 1) Num_Image  = Max_Image;
  if( Num_Image > Max_Image) Num_Image = 1;
  //-- Affichage Image
  O_Img.src  = "img" + Num_Image +".jpg"
}
</script>
</head>
<body bgcolor=#800000>
<center><br><br><br>
<table border="3" cellpadding="3" cellspacing="3" bordercolor="#11111111" bgcolor="#DBDBDB">
<tr>
<td align="center">
<img name="PHOTO" src="img1.jpg" border="0">
</td>
</tr>
</table>
<br><br>
<input type="button" value="Image précédente" onclick="ShowImage(-1);">
<input type="button" value="Image suivante"   onclick="ShowImage(+1);">
<input type="button" value="Première Image"   onclick="Num_Image = 1; ShowImage(0);">
<input type="button" value="Dernière Image"   onclick="Num_Image =Max_Image;ShowImage(0);">
</center>
</body>
</html>

si quelqu'un pouvait me bricoler 3 lignes d'exemple pour intégrer plusieurs images ce serait génial

-ensuite j'ai un soucis avec ce générateur de galerie (qui est génial) porta photo album

il suffit de charger ses photos,paramétrer la galerie,lancer et transférer le dossier obtenu sur le site.

MAIS quand je n'ai qu'un seul dossier album tout va bien et des que j'en mets un 2eme çà ne marche plus.
si quelqu'un a déjà utilisé ce générateur ce serait sympa de me dire comment faire

merci beaucoup

**4R416N33** · 18/05/2008, 19h20

Perso, je sais que y a un moyen pour faire avec ta méthode, mais je saurais pas te corriger.

Par contre, tu peux passer par un changement de contenu html ou bien avec un div qui change d'image de fond, et la si tu as des soucis, je pourrai t'aider

A toi de voir

Mtnt, ptet que certaines ames charitables auront les compétences pour te corriger en respectant ton code...

**pygoCENTRUS** · 18/05/2008, 20h34

Envoyé par 4R416N33

Par contre, tu peux passer par un changement de contenu html ou bien avec un div qui change d'image de fond, et la si tu as des soucis, je pourrai t'aider

tu peux développer stp (je suis débutant en la matière)

ce problème me bloque pour la construction de mon site

**4R416N33** · 18/05/2008, 20h43

J'ai déjà bien développé le sujet ici :

http://www.developpez.net/forums/sho...d.php?t=550482

Juste remplacer le onMouseOver par OnClick et le tour est joué !

**pygoCENTRUS** · 18/05/2008, 21h54

je viens d'aller voir,ça ne convient pas vraiment a ce que je veux.

je m'explique:

j'ai déjà mes pages qui sont faites avec feuilles de css externes.au centre de mes pages il y'a un cadre ou je voudrais afficher une photo et grave aux boutons "suivante" et "précédente" naviguer d'une photo a l'autre.

en fait le soucis c'est que je ne sais pas ou placer l'adresse de mes images dans le code.

ps:si quelqu'un connait un script avec miniatures pas trop galère je suis preneur

**4R416N33** · 18/05/2008, 22h04

C'est exactement la même chose, la seule différence, c'est que lui, ca doit réagir lorsque la souris passe dessus, et toi ca doit réagir lors d'un clic sur le bouton !

Désolé, mais je veux bien écrire un code pour aider, mais pas 50 fois le meme code qui sera identique à 90%

A moins que ton problème soit plus sur le fait que tu n'aies qu'un bouton et comment aller de la précédente à la suivante avec le même bouton.

Si c'est ca ton pb, dis le !

**pygoCENTRUS** · 18/05/2008, 22h57

je vais tenter de bricoler a partir de ton code,pour l'instant je n'arrive pas a y associer ma feuille css

merci pour ton aide

**Auteur** · 18/05/2008, 23h52

bonjour,

tu souhaites quelque chose comme ceci :

Code html :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
 
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="Author" content="Auteur - www.developpez.com" />
 
<style type="text/css">
<!--
.conteneur{
  text-align: center;
  width: 300px;
}
 
.bouton{
  text-align: center;
  width: 50px;
  height: 30px;
}
 
.image{
  width: 80px;
}
-->
</style>
 
<script type="text/javascript">
<!--
var chemin = "images/"; // dossier contenant les images
var tabImg = new Array("i1.gif", "i2.gif", "i3.gif", "i4.gif", "i5.gif"); //liste des images
var i;
 
 
function defileImage(arg)
{
  if (arg==null)
    i = 0;
  else
  {  
    switch (arg.id)
    { 
      case "btn1":    // id du bouton "première image"
          i = 0;
          break;
      case "btn2":    // id du bouton "image précédente"
          i--;
          break;
      case "btn3":    // id du bouton "image suivante"
          i++;
          break;
      case "btn4":    // id du bouton "dernière image"
          i = tabImg.length-1;
          break;
      default:
          i=0;
    }
      
  }
 
  document.getElementById("btn1").disabled = (i==0);
  document.getElementById("btn2").disabled = (i==0);    
 
  document.getElementById("btn3").disabled = (i==tabImg.length-1);
  document.getElementById("btn4").disabled = (i==tabImg.length-1); 
   
  document.getElementById("idImage").src = chemin + tabImg[i];
}
//-->
</script>
 
</head>
 
<body onload="defileImage(null)">
 
<div class="conteneur">
  <img src="" id="idImage" class="image" alt=""/><br />
  <input class="bouton" id="btn1" type="button" value=" |< " onclick="defileImage(this)" />
  <input class="bouton" id="btn2" type="button" value=" < " onclick="defileImage(this)" />
  <input class="bouton" id="btn3" type="button" value=" > " onclick="defileImage(this)" />
  <input class="bouton" id="btn4" type="button" value=" >| " onclick="defileImage(this)"/>
</div>
 
</body>
 
</html>

tu as juste à préciser les valeurs pour les variables chemin (dossier contenant les images) et tabImg (tableau contenant les images à afficher).

**pygoCENTRUS** · 19/05/2008, 11h20

ouiiiiiiiiiii c'est tout a fait ça,je l'ai mis en place ca marche nikel,juste un petit soucis avec mon css (pas de bordures du corps mais c'est rien le principal est fait.

est il possible d'afficher des vignettes en dessous,que l'on peut faire défiler? (peu importe comment)

en tout cas merci vraiment beaucoup a vous de m'avoir aidé grace a vous je peux enfin terminer mon site

**Auteur** · 19/05/2008, 15h18

voilà

tu peux cliquer sur les vignettes pour afficher directement l'image (j'ai dû légèrement modifier la fonction defileImage()) :

Code html :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
 
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="Author" content="Auteur - www.developpez.com" />
 
<style type="text/css">
<!--
.conteneur{
  text-align: center;
  width: 300px;
}
 
.bouton{
  text-align: center;
  width: 50px;
  height: 30px;
}
 
.image{
  width: 80px;
}
 
 
.listeVignettes{
  border: ridge #AAAAAA 5px;
  overflow: auto;
  width: 300px; 
  height: 100px;
  background-color: #000000;
  padding: 0px;
}
 
.vignettes{
  width: 40px;
  margin: 4px;
  background-color: #FFFFFF;
  border: ridge #FFFFFF 2px;
  cursor: pointer;  
}
-->
</style>
 
<script type="text/javascript">
<!--
var chemin = "images/"; // dossier contenant les images
var tabImg = new Array("i1.gif", "i2.gif", "i3.gif", "i4.gif", "i5.gif");
var i;
 
 
function defileImage(arg)
{
  if (!isNaN(arg) && arg!=null)
  {
    i = arg;
  }
 
  if (arg==null)
    i = 0;
  else
  {  
    switch (arg.id)
    { 
      case "btn1":    // id du bouton "première image"
          i = 0;
          break;
      case "btn2":    // id du bouton "image précédente"
          i--;
          break;
      case "btn3":    // id du bouton "image suivante"
          i++;
          break;
      case "btn4":    // id du bouton "dernière image"
          i = tabImg.length-1;
          break;
      /*default:
          i=0;*/
    }  
  }
 
  document.getElementById("btn1").disabled = (i==0);
  document.getElementById("btn2").disabled = (i==0);    
 
  document.getElementById("btn3").disabled = (i==tabImg.length-1);
  document.getElementById("btn4").disabled = (i==tabImg.length-1); 
   
  document.getElementById("idImage").src = chemin + tabImg[i];
}
 
function afficheVignettes()
{
  var j, objImg;
  var c;
  
  c = document.getElementById("Cvignettes");
 
  for (j=0; j<tabImg.length; j++)
  {
    objImg = document.createElement("img");
    objImg.src = chemin + tabImg[j];
    objImg.className="vignettes";
    
    objImg.n = j;
    objImg.onclick = function(){defileImage(this.n)}
        
    c.appendChild(objImg); 
  }
}
 
//-->
</script>
 
</head>
 
<body onload="afficheVignettes(); defileImage(null)">
 
<div class="conteneur">
  <img src="" id="idImage" class="image" alt="image" /><br />
  <input class="bouton" id="btn1" type="button" value=" |&lt; " onclick="defileImage(this)" />
  <input class="bouton" id="btn2" type="button" value=" &lt; " onclick="defileImage(this)" />
  <input class="bouton" id="btn3" type="button" value=" &gt; " onclick="defileImage(this)" />
  <input class="bouton" id="btn4" type="button" value=" &gt;| " onclick="defileImage(this)"/>
</div>
 
<div>
  <br/><br/><br/>
</div>
 
<div id="Cvignettes" class="listeVignettes">
</div>
 
</body>
 
</html>

le code ne passe pas la validation XHTML 1.1

Pour qu'il passe la validation XHTML 1.1 il faut écrire le script dans un fichier externe

ou l'encadrer des balises CDATA qui visiblement n'est pas encore bien reconnue...

**pygoCENTRUS** · 19/05/2008, 19h01

merci beaucoup,vraiment c'est PARFAIT

je vais peut etre abuser un peu mais comment fait on pour faire défiler les vignettes horizontalement et non verticalement?

ps:quand mon site est en local le design est nikel mais des que je tranfere sur mon serveur je perds tout mon design (css) ca me gonfle sévere la

**Auteur** · 19/05/2008, 21h56

Envoyé par pygoCENTRUS

merci beaucoup,vraiment c'est PARFAIT

je vais peut etre abuser un peu mais comment fait on pour faire défiler les vignettes horizontalement et non verticalement?

euh, comment peux-tu voir que le défilement est vertical ou horizontal ? Elles sont affichées les unes après les autres

Envoyé par pygoCENTRUS

ps:quand mon site est en local le design est nikel mais des que je transferts sur mon serveur je perds tout mon design (css) ça me gonfle sévère la

euh je ne sais pas... un problème de lien relatif ?

**pygoCENTRUS** · 19/05/2008, 23h57

pour le css c'est reglé (erreur de crétin

)

pour les vignettes elles s'affichent dans un cadre avec une barre de défilement verticale.c'est cette fameuse barre que je voudrais horizontale

c'est plus clair comme ça?

**Auteur** · 20/05/2008, 00h10

Envoyé par pygoCENTRUS

c'est plus clair comme ça?

oui ô grand chef c'est plus clair comme ça

.......

(merci d'être moins agressif la prochaine fois....)

Voici donc la correction à appliquer :

Code javascript :

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
18
19
20
21
22
 
function afficheVignettes()
{
  var j, objImg, nobr;
  var c;
 
  c = document.getElementById("Cvignettes");
  nobr = document.createElement("nobr");
 
  for (j=0; j<tabImg.length; j++)
  {  
    objImg = document.createElement("img");
    objImg.src = chemin + tabImg[j];
    objImg.className="vignettes";
 
    objImg.n = j;
    objImg.onclick = function(){defileImage(this.n)}
 
    nobr.appendChild(objImg); 
  }
  c.appendChild(nobr); 
}

**pygoCENTRUS** · 20/05/2008, 00h19

nan nan mais ca n'était pas agressif au contraire,je n'ai aucune raison de l'être avec toi vu l'aide plus que précieuse que tu m'as apporté

désolé que tu ai pu mal prendre mes paroles

mais en tout cas un énorme merci grâce a toi mon site est quasiment terminé

**Auteur** · 20/05/2008, 00h25

Envoyé par pygoCENTRUS

mais en tout cas un énorme merci grâce a toi mon site est quasiment terminé

de rien

bonne continuation

**pygoCENTRUS** · 20/05/2008, 00h27

aaaargh quand je mets la modif du script pour les vignettes mes images disparaissent

edit:c'est bon elles s'affichent mais barre de défilement est toujours verticale

**Auteur** · 20/05/2008, 00h32

Envoyé par pygoCENTRUS

aaaargh quand je mets la modif du script pour les vignettes mes images disparaissent

Tu as remplacé correctement la fonction (il n'y a pas doublon) ?

**pygoCENTRUS** · 20/05/2008, 00h40

loool

non non pas de doublons

les images s'affichent c'est bon mais la barre de défilement est comme avant (verticale) et maintenant mon pied de page se retrouve dans le corps

edit:pour le pied de page c'est bon il fallait juste ajuster la taille des images

mais la barre n'a pas bougé

edit 2:y'a t'il une fonction pour que la hauteur du corps s'ajuste automatiquement a la hauteur des images?

**pygoCENTRUS** · 20/05/2008, 01h58

bon je vais pas faire un 3eme edit

j'ai quelques soucis suite a l'intégration de ce script>

-le pied de page semble collé au cadre contenant les vignettes (il se promene selon la taille des images) et il a perdu ses propriétés css il est gris au lieu de noir

-il faudrait que le corps de page s'adapte aux mouvements des images juste sur la hauteur car la largeur ne pose pas de soucis

galerie photo

JavaScript

Discussions similaires

Partager

Partager