jQueryとajaxギャラリーがフェードインし、サムのクリックで効果を消してくれます！

Question

助けが必要です。

Iのようなイメージマップを介して参照異なるサムネイル画像を一つの画像として読み込む水平サムネールのラインを持っている：

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

ID =「ズーム」とDIVにおけるIMGタグは私のAJAXズームありますユーザがサムネイルを「クリック」して画像のより大きなバージョンを表示するためのウィンドウ。

これは、ZOOMボックスのサムネイルのLARGEバージョンをフェードインするjQueryコードです。

• ：。

  <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の最初のサムネイルをクリックしたフェードイン、残りは単にちょうどそれがこのように動作するようにするために、私が好きなフェードイン]をクリックすると表示され、そしてませんユーザは、サムネイル

• 大きな画像ボックスを拡大する
• ユーザが最初の画像がフェードアウト及び第2の選択されたサムネイルを
フェードイン
• 別のサムネイルをクリックINフェードクリック
• など

私はそれをはっきり説明したいと思います。 :)どんな助けも非常に高く評価されるでしょう。

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

すぐにお試しいただきありがとうございます。新しく選択した大画像を表示しているように見えますが、それを消してからもう一度フェードインします。ユーザーが

ユーザーが

などというように、次の画像の次の画像> FADE OUT第一の画像> FADEを選択選択した後、第一の画像では

• FADE：

  は、私はそれを必要とします。