0

助けが必要です。

水平方向のサムネイルの行が1つの画像として読み込まれ、さまざまなサムネイル画像がイメージマップを介して参照されています。

<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 = "zoom"のdiv内のIMGタグは、ユーザーがサムネイルを「クリック」して画像の拡大版を表示するためのAJAXズームウィンドウです。

これは、ZOOMボックスのサムネイルの大きいバージョンをフェードインする必要がある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は最初にクリックされたサムネイルでのみフェードインし、残りはクリックすると表示されるだけで、フェードインしません。このように機能させたいと思います。

  • ユーザーがサムネイルをクリックする
  • 大きな画像はズームボックスにフェードインします
  • ユーザーが別のサムネイルをクリックする
  • 最初の画像はFADESOUTで、2番目に選択されたサムネイルはFADESINです。
  • 等

はっきり説明したいと思います。:)どんな助けでも大歓迎です。

4

2 に答える 2

2

パスを変更してフェードインする前に、画像をフェードアウトする必要があります...したがって、クリック機能は次のようになります。

編集：アニメーションの表示/非表示が非同期で行われたことを忘れたため、フェードアウトでコールバックを使用して残りをトリガーする必要があります...コードは次のようになります：

<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>
于 2009-05-01T02:32:53.740 に答える
0

私はここで新しく、あなたの応答に対する私のコメントがひどくスタイルされているのを見ました。：P

迅速な対応に感謝します。これを試してみましたが、新しく選択した大きな画像が表示され、フェードアウトしてから、もう一度フェードインするように見えます。

私はそれが必要です：

  • ユーザーが選択した後の最初の画像のフェードイン
  • ユーザーが次の画像を選択>FADEOUT最初の画像>FADEIN次の画像
  • などなど。
于 2009-05-01T02:44:37.190 に答える