Créer galerie photo avec changement de page toutes les x img

**finalfx** · 23/12/2006, 02h47

Bonjour,

Je dois créer une galerie de photos miniatures gérée par javascript; j'ai donc créé un array contenant toutes les images contenue dans un dossier puis via deux boucles imbriquées j'ai créé un tableau html avec sur chaque rangée 7 images. Jusque là pas de problème...

Maintenant j'aimerais que toutes les 7 images (une rangée de tableau dans mon cas), les 7 images suivantes s'affichent dans la même page à la place des 7 précédentes et ainsi de suite jusqu'à ce que toutes les images du dossier soient affichées. Evidemment je ne veux pas que toutes les images s'affichent simultanément mais via un système de liens précédent - suivant je pourrai gérer l'affichage des images.

Si quelqu'un voit via quelle méthode je peux réaliser celà ?

Merci d'avance !

Voici les url de mes fichiers :

http://www.kwispelkwaf.be/exercices/photogallery.html

http://www.kwispelkwaf.be/exercices/photogallery.js

**javatwister** · 23/12/2006, 09h10

et tu ne veux absolument pas de rechargement de page, comme avec des donées issues d'une db? pas de langage serveur?

**javatwister** · 23/12/2006, 11h06

exemple simpliste et incomplet:

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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...</title>
 
<style type="text/css">
 
#cadre {
background-color:gray;
text-align:center;
}
 
img {
border:2px solid #ff0000;
margin:20px;
padding:20px;
}
 
a {
text-decoration:none;
color:#ffff00;
font-weight:bold;
}
 
a:hover {
color:#ff0000;
}
 
</style>
 
</head>
<body>
 
<div id="cadre">
 
	<img src="sm01.gif" alt="" />
	<img src="sm02.gif" alt="" />
	<img src="sm03.gif" alt="" />
	<img src="sm04.gif" alt="" />
	<img src="sm05.gif" alt="" />
	<img src="sm06.gif" alt="" />
	<img src="sm07.gif" alt="" />
 
	<div style="text-align:center">
		<a href="#" onclick="go(-7);return false">précédent</a>
		<a href="#" onclick="go(7);return false">suivant</a>
	</div>
 
</div>
 
 
<script type="text/javascript">
 
var tab=[];
var start=0;
var c=document.getElementById("cadre").getElementsByTagName("img");
 
for(i=1;i<30;i++){// le nombre total d'images
	z=i>9?"":"0";
	im=new Image();
	im.src="sm"+z+i+".gif";
	tab.push(im.src)
}
 
 
 
function go(where){
	if(start+where < tab.length && start+where >= 0){
		start+=where;	
		for(i=0;i<c.length;i++){
			if(tab[i+start]){
				c[i].style.visibility="visible"				
				c[i].src=tab[i+start]	
			}
			else{
				c[i].style.visibility="hidden"
			}
		}
	}
}
 
</script>
 
</body>
</html>

http://javatwist.imingo.net/test.htm

**finalfx** · 23/12/2006, 14h46

Si j'ai compris ce script, il affiche tout mais en jouant sur les propriétés visible et hidden il montre ou masque les images désirées ?

Non, il n'y a pas de côté serveur, uniquement possible côté client, j'ai donc créé un tableau contenant toutes les images mais ce que je n'arrive pas à faire c'est qu'il n'affiche pas immédiatement toutes les images mais qu'à l'affichage il divise le nombre d'images de façon à les grouper par 7 et que lorsque je clique sur un lien suivant il me montre les 7 suivantes, n'y a t'il pas un autre moyen qu'en jouant sur ces propriétés de visibilité ?

**javatwister** · 23/12/2006, 15h50

euh... tu as regardé l'exemple ou pas? (la propriété "visible" n'est qu'un détail, dans le script);
dis-moi précisément ce qu'il y a à corriger pour que le résultat corresponde à ce que tu cherches;

**finalfx** · 23/12/2006, 16h45

oui, j'ai regardé l'exemple mais moi il faut qu'à chaque cliq sur le lien suivant j'ai une row de mon tableau qui s'affiche. (chaque row contenant 7 td)

**javatwister** · 23/12/2006, 17h59

hein?
tu veux remplir progressivement les lignes? en demandant au client de cliquer pour afficher chaque ligne? super ergonomique comme truc

je me fous bien que tu utilises un tableau pour 7 images, le problème n'est pas là; dans l'exemple, les 7 images courantes sont remplacées par les 7 images suivantes ou précédentes: si ce n'est pas le principe que tu cherches, je n'ai décidément rien compris !

**finalfx** · 23/12/2006, 18h09

Je comprends que je m'explique pas très bien

Voici l'énoncé tel qu'on me l'a envoyé :

1) générer un tableau contenant toutes les images présentes dans un dossier (de sorte à ce que si on rajoute des images dans le dossier le nombre de cellules du tableau s'ajuste automatiquement).

2) créer une fonction popup pour afficher l'image grandeur réelle lors du clic sur l'image miniature dans le tableau.

3) afficher non pas la totalité des vignettes mais un groupe de 7 vignettes, réaliser une pagination (lien précédent et lien suivant) pour passer de page en page avec un test pour arrêter cette pagination au début de l'affichage et à la fin... (récupérer la variable d'url avec window.search.slice...)

4) sécuriser la pagination, tester la valeur récupérée (si contraire aux attentes, assigner une valeur fixe)

Est-ce que c'est plus clair ? Moi je suis bloqué à l'étape 3

**javatwister** · 23/12/2006, 18h23

ben, comment dire... il faut avouer que l'étape 3 est complètement con:
si on affiche toutes les images dans le tableau, ça relève de la démence de dire après "non, on n'en affiche que 7";
le fait de changer d'url pour afficher la suite amène les inconvénients d'un script serveur (rechargement) sans les avantages (simplicité de gestion d'une banque d'image MySQL);
dans mon test, l'avantage est d'ailleurs de ne pas passer par l'url, ce qui évite d'avoir à tester si un argument fantaisiste n'a pas été tapé par l'utilisateur;

en tout cas, le paradoxe du "toutes mais seulement 7" me gêne bcp pour t'aider...