jQuery и галерея ajax исчезают и исчезают при нажатии на большие пальцы!

Question

Нужна помощь, пожалуйста.

У меня есть строка горизонтальных миниатюр, загруженной в одно изображение с различных эскизов изображений ссылочных через карты изображения, как, например:

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

Тег IMG в DIV с идентификатором = «Масштаб» мой AJAX зум окно, когда пользователи «нажимают» на миниатюры для отображения большей версии изображения.

Это код jQuery, который я должен затухать в больших версиях миниатюр в окне 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> 

Прямо сейчас, JQuery ТОЛЬКО выцветает первый нажал на миниатюру, остальные просто просто появляются при нажатии, и не выгорает Я хотел бы, чтобы он работал так:.

• пользователь нажимает эскизов
• большое изображение выцветает, чтобы увеличить коробка
• пользователь нажимает еще один миниатюру,
• первое изображение затухает и второй выбран эскиз выцветает
• и т.д.

Надеюсь, я объяснил это четко. :) Любая помощь была бы чрезвычайно оценена.

Answer 1

Вам просто нужно, чтобы исчезнуть изображение перед изменением пути & угасание его ... так что ваша функция должна стать нажмите:

EDIT: Вспомнить что показать/скрыть анимации произошло асинхронно, так что вы необходимо использовать функцию обратного вызова на замирания, чтобы вызвать из остальных ... код должен быть:

<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

Я здесь я новичок и только что видел мой комментарий к ответу был ужасно стиле. : P

Благодарим вас за быстрый ответ - просто попробовал это и он, за исключением того, что он выглядит так, как будто он отображает недавно выбранное изображение LARGE, FADES it OUT, а затем FADES it IN снова.

мне это нужно, чтобы:

• FADE IN 1 изображение после того, как пользователь выбирает
• пользователь выбирает следующий кадр> Fade Out первого изображения> FADE IN следующего изображения
• и так далее и так далее.