Discussion :

[lemirandais]

Bonjour à tous, je suis en train de finir de mettre en place un galerie d'image.
Actuellement elle fonctionne très bien avec 9 images. cf <lien>http://grada.u7n.org/sitecocom/phototheque.html</lien>
Ces 9 images sont présents la base de donnée. Jusque là pas trop difficile. A l'affichage, ces images sont mis en place dans un div.
Au dela de 9 images, le surplus se met en place dans un autre div.
Je souhaiterais au chargement de la page, afficher que le premier div et cacher les suivants. Puis par le biais d'un bouton suivant ou précédent, passer sur les 9 images suivants (le div suivant) ou précédent (le div précédent) et ainsi de suite.

En gros il faut passer d'un div à un autre ce bout de code

Code :

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

style="visibility:hidden;display:none;

"
Lorsque l'utilisateur clique sur suivant, le div en cours se cache et le div suivant apparaît....

Voici le code html généré par ma base de donnée. C'est encore un test, c'est pour cela qu'il y a que 2 photos différentes.

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
<div id="galerie">
			<div>
				<ul class="thumb">
					<li><a href="images/galerie/nom_galerie/grande/main_image1.jpg"><img src="images/galerie/nom_galerie/mini/thumb1.jpg" alt="" /></a></li>
					<li><a href="images/galerie/nom_galerie/grande/main_image5.jpg"><img src="images/galerie/nom_galerie/mini/thumb5.jpg" alt="" /></a></li>
					<li><a href="images/galerie/nom_galerie/grande/main_image1.jpg"><img src="images/galerie/nom_galerie/mini/thumb1.jpg" alt="" /></a></li>
					<li><a href="images/galerie/nom_galerie/grande/main_image5.jpg"><img src="images/galerie/nom_galerie/mini/thumb5.jpg" alt="" /></a></li>
					<li><a href="images/galerie/nom_galerie/grande/main_image1.jpg"><img src="images/galerie/nom_galerie/mini/thumb1.jpg" alt="" /></a></li>
					<li><a href="images/galerie/nom_galerie/grande/main_image5.jpg"><img src="images/galerie/nom_galerie/mini/thumb5.jpg" alt="" /></a></li>	
					<li><a href="images/galerie/nom_galerie/grande/main_image1.jpg"><img src="images/galerie/nom_galerie/mini/thumb1.jpg" alt="" /></a></li>
					<li><a href="images/galerie/nom_galerie/grande/main_image5.jpg"><img src="images/galerie/nom_galerie/mini/thumb5.jpg" alt="" /></a></li>
					<li><a href="images/galerie/nom_galerie/grande/main_image1.jpg"><img src="images/galerie/nom_galerie/mini/thumb1.jpg" alt="" /></a></li>
				</ul>
			</div>
			<div style="visibility:hidden;display:none;">	
				<ul class="thumb">
					<li><a href="images/galerie/nom_galerie/grande/main_image1.jpg"><img src="images/galerie/nom_galerie/mini/thumb1.jpg" alt="" /></a></li>
					<li><a href="images/galerie/nom_galerie/grande/main_image5.jpg"><img src="images/galerie/nom_galerie/mini/thumb5.jpg" alt="" /></a></li>
					<li><a href="images/galerie/nom_galerie/grande/main_image1.jpg"><img src="images/galerie/nom_galerie/mini/thumb1.jpg" alt="" /></a></li>
					<li><a href="images/galerie/nom_galerie/grande/main_image5.jpg"><img src="images/galerie/nom_galerie/mini/thumb5.jpg" alt="" /></a></li>
					<li><a href="images/galerie/nom_galerie/grande/main_image1.jpg"><img src="images/galerie/nom_galerie/mini/thumb1.jpg" alt="" /></a></li>
					<li><a href="images/galerie/nom_galerie/grande/main_image5.jpg"><img src="images/galerie/nom_galerie/mini/thumb5.jpg" alt="" /></a></li>	
					<li><a href="images/galerie/nom_galerie/grande/main_image1.jpg"><img src="images/galerie/nom_galerie/mini/thumb1.jpg" alt="" /></a></li>
					<li><a href="images/galerie/nom_galerie/grande/main_image5.jpg"><img src="images/galerie/nom_galerie/mini/thumb5.jpg" alt="" /></a></li>
					<li><a href="images/galerie/nom_galerie/grande/main_image1.jpg"><img src="images/galerie/nom_galerie/mini/thumb1.jpg" alt="" /></a></li>
				</ul>
			</div>
			<div style="visibility:hidden;display:none;">	
				<ul class="thumb">
					<li><a href="images/galerie/nom_galerie/grande/main_image1.jpg"><img src="images/galerie/nom_galerie/mini/thumb1.jpg" alt="" /></a></li>
					<li><a href="images/galerie/nom_galerie/grande/main_image5.jpg"><img src="images/galerie/nom_galerie/mini/thumb5.jpg" alt="" /></a></li>
					<li><a href="images/galerie/nom_galerie/grande/main_image1.jpg"><img src="images/galerie/nom_galerie/mini/thumb1.jpg" alt="" /></a></li>
					<li><a href="images/galerie/nom_galerie/grande/main_image5.jpg"><img src="images/galerie/nom_galerie/mini/thumb5.jpg" alt="" /></a></li>
					<li><a href="images/galerie/nom_galerie/grande/main_image1.jpg"><img src="images/galerie/nom_galerie/mini/thumb1.jpg" alt="" /></a></li>
					<li><a href="images/galerie/nom_galerie/grande/main_image5.jpg"><img src="images/galerie/nom_galerie/mini/thumb5.jpg" alt="" /></a></li>	
					<li><a href="images/galerie/nom_galerie/grande/main_image1.jpg"><img src="images/galerie/nom_galerie/mini/thumb1.jpg" alt="" /></a></li>
					<li><a href="images/galerie/nom_galerie/grande/main_image5.jpg"><img src="images/galerie/nom_galerie/mini/thumb5.jpg" alt="" /></a></li>
					<li><a href="images/galerie/nom_galerie/grande/main_image1.jpg"><img src="images/galerie/nom_galerie/mini/thumb1.jpg" alt="" /></a></li>
				</ul>
			</div>
		</div>

Je suis ouvert à toute proposition.

Merci d'avance.
lemirandais

[lemirandais]

Bonjour à tous, j'ai peut être trouvé la réponse mais théorique mais je ne vois pas comment le faire et le mettre en place. Voila mon idée. Il faut que je mette des identifiants à chaque div. De cette manière je récupère cet identifiant du div afficher et je fait des opérations en javascript du type ".css()".
Cependant a ce niveau, j'ai un problème, comment récupérer le bon identifiant?
J'ai réalisé un script de test mais la condition where n'existant pas je ne vois pas comment faire.
Voila mon code html

Code :

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

1
2
3
4
5
6
7
8
<div id="galerie">
			<div class="galerie" id="1">
			</div>
			<div class="galerie" id="2" style="visibility:hidden;display:none;">	
			</div>
			<div class="galerie" id="3" style="visibility:hidden;display:none;">	
			</div>
		</div>

Et mon code javascript de test:

Code :

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

1
2
3
4
5
6
7
8
9
$(document).ready(function(){
		$("#click").click(function () {
			where ($(".galerie").is(":visible")) //where n'existe pas
{
				var num = this.attr('id');
				alert(num);
			} 
		});
	});

Je dois pas être loin (théoriquement) de ce que je veux faire. Si j'arrive à récupérer l'identifiant, il s'agira de faire des math, page suivant=identifiant+1, page précédente=identifiant-1
Merci par avance de votre aide.
lemirandais