jQuery et la galerie ajax apparaissent et disparaissent progressivement sur les clics du pouce!

Question

Besoin d'aide, s'il vous plaît.

J'ai une ligne de miniatures horizontales chargées en UNE image avec les différentes images de miniatures référencées via un imagemap en tant que tel:

<div id="zoom">
    <img src="" />
</div>
<div id="collectionindex">
    <img src="thumbnail-strip.jpg" alt="" usemap="#Map" />
        <map name="Map" id="Map">
            <area shape="rect" coords="151,0,211,39" href="image1.jpg" alt="" />
            <area shape="rect" coords="215,0,275,39" href="image2.jpg" alt="" />
            <area shape="rect" coords="279,0,339,39" href="image3.jpg" alt="" />
            <area shape="rect" coords="343,0,403,39" href="image4.jpg" alt="" />
            <area shape="rect" coords="407,1,467,40" href="image5.jpg" alt="" />
            <area shape="rect" coords="471,0,531,39" href="image6.jpg" alt="" />
        </map>
</div>

La balise IMG dans le div avec id = " zoom " est ma fenêtre de zoom AJAX lorsque les utilisateurs " cliquez sur " sur les vignettes pour afficher la version plus grande de l'image.

C’est le code jQuery que je dois fondre dans les versions LARGE des vignettes de la zone ZOOM.

<script type="text/javascript">
$(document).ready(function(){

$("area").click(function(){

        var largePath = $(this).attr("href");

        $("#zoom img").attr({ src: largePath }).fadeIn("slow"); return false;
            });
    });
</script>

Pour l'instant, jQuery apparaît UNIQUEMENT dans le premier clic sur la vignette, le reste n'apparaît qu'en cliquant dessus, et non en fondu. J'aimerais que cela fonctionne de cette façon:

• l'utilisateur clique sur la vignette
• grande image FADES IN pour agrandir la boîte
• l'utilisateur clique sur une autre vignette
• première image FADES OUT et deuxième miniature sélectionnée FADES IN
• etc.

J'espère que je l'ai expliqué clairement. :) Toute aide serait extrêmement appréciée.

Answer 1

Il vous suffit de masquer l'image avant de modifier le chemin d'accès & amp; fondu dans ... donc votre fonction de clic devrait devenir:

EDIT : vous avez oublié que les animations afficher / masquer se sont déroulées de manière asynchrone. Vous devez donc utiliser un rappel sur le fondu pour déclencher le reste ... le code doit être:

<script type="text/javascript">
$(document).ready(function(){
    $("area").click(function(){
        var largePath = $(this).attr("href");
        $("#zoom img").fadeOut("slow", function() {
            $(this).attr({ src: largePath }).fadeIn("slow");
        });
        return false;
    });
});
</script>

Answer 2

Je suis nouveau ici et je viens de voir que mon commentaire à votre réponse était terriblement stylé. : P

merci pour la réponse rapide - vous venez d’essayer ceci et cela sauf que c’est comme si elle affichait la grande image nouvellement sélectionnée, le masquait, puis le masquait à nouveau.

J'en ai besoin pour:

• FADE IN 1st image après la sélection de l'utilisateur
• l'utilisateur sélectionne l'image suivante > FADE OUT 1ère image > FADE IN next image
• et ainsi de suite.