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)

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager