La galleria jQuery e ajax si dissolvono e sfumano l'effetto sui clic del pollice!

Question

Hai bisogno di aiuto, per favore.

Ho una linea di miniature orizzontali caricate come UNA immagine con le diverse immagini di miniature a cui si fa riferimento tramite una mappa immagine in quanto tale:

<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>

Il tag IMG nel div con id = " zoom " è la mia finestra zoom AJAX per quando gli utenti " fare clic " sulle miniature per visualizzare la versione più grande dell'immagine.

Questo è il codice jQuery che devo sfumare Nelle GRANDI versioni delle anteprime nella casella 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>

In questo momento, jQuery si dissolve SOLO nella prima miniatura cliccata, il resto appare semplicemente facendo clic e non si dissolve. Vorrei che funzionasse in questo modo:

• miniatura clic utente
• FADES IN immagini grandi per ingrandire la casella
• l'utente fa clic su un'altra miniatura
• prima immagine FADES OUT e seconda miniatura selezionata FADES IN
• ecc.

Spero di averlo spiegato chiaramente. :) Qualsiasi aiuto sarebbe immensamente apprezzato.

Answer 1

Devi solo sfumare l'immagine prima di cambiare il percorso & amp; dissolvenza in ... quindi la funzione clic dovrebbe diventare:

EDIT : ho dimenticato che le animazioni show / hide sono avvenute in modo asincrono, quindi è necessario utilizzare un callback sulla dissolvenza per attivare il resto ... il codice dovrebbe essere:

<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

Sono nuovo qui e ho appena visto che il mio commento alla tua risposta è stato terribilmente disegnato. : P

grazie per la rapida risposta - ho appena provato questo e, tranne che sembra che VISUALIZZA l'immagine LARGE appena selezionata, la dissolve, poi la dissolve di nuovo.

ne ho bisogno per:

• FADE IN 1st image dopo la selezione dell'utente
• l'utente seleziona l'immagine successiva > FADE OUT prima immagine > FADE IN prossima immagine
• e così via e così via.