IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Galerie image: Afficher/cacher des div


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Octobre 2007
    Messages
    282
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Gers (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Octobre 2007
    Messages : 282
    Par défaut Galerie image: Afficher/cacher des div
    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

  2. #2
    Membre éclairé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Octobre 2007
    Messages
    282
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Gers (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Octobre 2007
    Messages : 282
    Par défaut
    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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Afficher / Cacher des div, probleme
    Par bob633 dans le forum Général JavaScript
    Réponses: 10
    Dernier message: 25/02/2012, 12h49
  2. afficher cacher des div script CGI
    Par calimero83 dans le forum Réseau/Web
    Réponses: 0
    Dernier message: 04/12/2011, 20h00
  3. Afficher/cacher des div automatiquement
    Par spawns dans le forum Général JavaScript
    Réponses: 12
    Dernier message: 31/01/2009, 14h34
  4. Afficher & Cacher des div
    Par stanley dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 29/10/2008, 20h26
  5. Afficher / Cacher des divs
    Par figatelliSTI dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 03/04/2008, 16h57

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo