jQuery e Ajax Galeria de fade in e fade out efeito sobre cliques polegar!

Question

Precisa de alguma ajuda, por favor.

Eu tenho uma linha de miniaturas horizontais carregado como uma imagem com as imagens diferentes miniaturas referenciados através de um mapa de imagem como tal:

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

A tag IMG na div com id = "zoom" é a minha janela zoom AJAX para quando os usuários "clique" nas miniaturas para exibir a versão maior da imagem.

Este é o código jQuery Eu tenho que fadeIn as versões GRANDES das miniaturas na caixa 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>

Agora, jQuery APENAS desaparece no primeiro clicado na miniatura, o resto simplesmente aparecem ao clicar, e não fade in Eu gostaria que ele funcione desta maneira:.

• usuário clica em miniatura
• caixa de imagem grande desvanece-se dentro para fazer zoom
• usuário clica em outro miniaturas
• primeira imagem desaparece e segunda selecionado em miniatura desaparece dentro
• etc.

Espero que eu expliquei isso claramente. :) Qualquer ajuda seria imensamente apreciada.

Answer 1

Você só precisa desaparecer a imagem para fora antes de alterar o caminho e desaparecendo-lo em ... então a sua função de clique deve tornar-se:

Editar : Esqueceu-se de que o show / hide animações aconteceu de forma assíncrona, então você precisa usar um retorno de chamada no fade out para acionar o resto ... código deve ser:

<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

Eu sou novo aqui e só vi o meu comentário à sua resposta foi denominado terrivelmente. : P

obrigado pela resposta rápida - apenas tentei isso e ele só que parece que exibe a imagem GRANDE recém-selecionado, ENFRAQUECE-lo, em seguida, desaparece-o novamente.

eu preciso que ele:

• FADE IN 1ª imagem após o usuário seleciona
• O usuário seleciona próxima imagem> imagem 1º FADE OUT> FADE IN próxima imagem
• e assim por diante e assim por diante.