[RESOLU] Jquery accordion avec des images

Bonjour,
tout d'abord, je précise tout de suite que je suis une chèvre en javascript.

MON PROBLEME
Je souhaiterais mettre en place un système d'accordéon jquery pr faire une preview de galerie photos.
C'est à dire qu'en ouvrant la page index, on verrait dans la sidebar 3 miniatures et en cliquant sur celles-ci, une img un peu plus grande viendrait s'afficher en dessous.

ACTUELLEMENT
Pas de soucis pour jouer l'animation. Qd je clique sur la première miniature, la grde img s'affiche. Mais quand je clique sur une autre miniature, la grande image correspondante vient s'afficher en dessous.

CE QUE JE VOUDRAIS
Je voudrais que lorsque l'on clique sur une nouvelle miniature, la grde image qui était jusqu'alors affichée se referme et qu'ensuite seulement la nouvelle grande image apparaisse.

Pour plus de clarté, je vous ai fait un schéma ci-dessous :



Voici mon code html :

<div id="bloc-sidebar">
    <div id="the-slider">
        <div class="slide">
            <a href="#"><img class="thumb-slide1" src="/img/thumb-01.jpg" /></a>  
        </div>
                <div id="spacer-thumbs"></div>
        <div class="slide">
            <a href="#"><img class="thumb-slide2" src="/img/thumb-02.jpg" /></a>  
        </div>
                <div id="spacer-thumbs"></div>
        <div class="slide">
            <a href="#"><img class="thumb-slide3" src="/img/thumb-03.jpg" /></a>  
        </div>
        
        <div id="big1">
            <img src="/img/big-01.jpg" />
        </div>
        <div id="big2">
            <img src="/img/big-02.jpg" />
        </div>
        <div id="big3">
            <img src="/img/big-03.jpg"  />
        </div>
    </div>
</div>

Et ci-dessous le code javascript que j'ai inséré avant la fermeture de la balise head :

<script type="text/javascript">
		$(document).ready(function(){	
			$(".thumb-slide1").click(function(){
			$("#big1").slideToggle("600")
			return false;
			});
			$(".thumb-slide2").click(function(){
			$("#big2").slideToggle("600")
			return false;
			});
			$(".thumb-slide3").click(function(){
			$("#big3").slideToggle("600")
			return false;
			});
		});
</script>

Je sais qu'il faut rajouter ou modifier qq chose dans cette fonction mais je ne sais pas quoi et malgré mes recherches, je n'ai rien trouvé.

Ayez pitié d'un pauvre débutant qui n'y connait rien. En plus je suis certain que ça pourra aider plein de gens.
Vous ferez une bonne action et vous aurez votre place au paradis.

Merci d'avance.
Modifié par Monsieur stresse (12 Jun 2010 - 10:31)

Non? Personne?

J'ai bien essayé d'adapter le tuto "Créer un menu déroulant “accordéon” avec jQuery" disponible sur ce site à mon cas particulier mais pas moyen de le faire fonctionner.

J'espère que quelqu'un pourra m'aider.

Bon, malgré le peu d'enthousiasme suscité, j'édite ce post mais ne marque pas le sujet comme "RESOLU" car il ne l'est pour l'instant qu'à moitié.

Je n'ai plus le problème des images s'affichant les unes sous les autres mais avec le code ci-dessous il y a une petite saccade car lorsque l'on clique sur une miniature la grde image qui était jusqu'alors affichée disparaît d'un seul coup pour laisser jouer le déploiement suivant.

L'effet que je souhaiterais obtenir idéalement c'est un déploiement en sens inverse pour faire disparaître la grde img devenue obsolète PUIS le déploiement normal (comme c'est le cas ici) de la nouvelle grande image. De telle sorte que l'animation soit plus fluide.

UNE IDEE ?...

Ci-dessous le code en l'état actuel:

<script type="text/javascript">
        $(document).ready(function(){   
            $(".thumb-slide1").click(function(){
            $("#big2").toggle(false);
            $("#big3").toggle(false);
            $("#big1").slideToggle("600");
            return false;
            });
            $(".thumb-slide2").click(function(){
            $("#big1").toggle(false);
            $("#big3").toggle(false);
            $("#big2").slideToggle("600");
            return false;
            });
            $(".thumb-slide3").click(function(){
            $("#big1").toggle(false);
            $("#big2").toggle(false);
            $("#big3").slideToggle("600");
            return false;
            });
        });
</script>

Bon, vous ne m'avez pas beaucoup aidé sur ce coup là. J'ai finalement trouvé la solution tout seul (ou presque).

Comme je pense que ça peut en intéresser d'autres que moi, VOICI THE SOLUTION :

1 - Le code à insérer avant la balise </head>

        <script type="text/javascript">
        var deployer;
        deployer = "";
       
        function deploy() {
            $("#"+deployer.substring(0,4)).slideToggle("600");
        }
       
        function reset(bigno) {
            var attendre=false;
            var deployno=deployer.substring(0,4);
           
            // ferme autre image si ouverte.
            if((deployer == deployno+"_on") && (deployno != bigno))
            {
                $("#"+deployno).slideToggle("600");
                attendre = true;
            }
           
            // met à jour image ouverte ou fermé en cour
            if (deployer == bigno+"_on") // si bigno deployé
                deployer = bigno+"_off"; // bigno refermé
            else
                deployer = bigno+"_on";  // bigno ouvert
           
            // deploie la nouvelle image en cour
            if (attendre)
                setTimeout(deploy,600);
            else
                deploy();
        }
       
        $(document).ready(function(){
            $(".thumb-slide1").click(function(){
                reset("big1"); return false;
            });
            $(".thumb-slide2").click(function(){
                reset("big2"); return false;
            });
            $(".thumb-slide3").click(function(){
                reset("big3"); return false;
            });
        });
    </script>

2 - A insérer avant la balise </body>

<script>
        $("#big1").toggle(false);
        $("#big2").toggle(false);
        $("#big3").toggle(false);
</script>

Alors? Elle est pas belle la vie?