0

次のようにブラウザに画像のサムネイルを表示します。 ここに画像の説明を入力

サムネイルをクリックすると、そのサムネイルの新しいウィンドウが空白で表示されます。そのサムネイルの大きな画像を表示したい。イメージコントロールを使用しています。そのサムネイルの大きな画像を表示するにはどうすればよいですか?

このソースでサムネイルを表示すると:

src="file:~/printImages/0150/21022013/0150_21022013_002_tn.jpg"

次に、その大きな画像ソースは、次を除いてまったく同じです_tn。

src="file:~/printImages/0150/21022013/0150_21022013_002.jpg"

クリック時にソースの最後のセクションを _tn.jpg から .jpg に置き換えて、大きな画像を新しいウィンドウに表示することはできますか?

4

1 に答える 1

1

jQuery を使用すると、このようなことができます。この例の選択プロセスをより明確にするために、css クラス「bigClick」を追加しました。

<img src="/printImages/0150/21022013/0150_21022013_002_tn.jpg" class="bigClick"/><br/>
<img src="/printImages/0150/21022013/0150_21022013_003_tn.jpg" class="bigClick"/><br/>
<img src="/printImages/0150/21022013/0150_21022013_004_tn.jpg" class="bigClick"/><br/>

<script type="text/javascript">
    $(function () {
        $(".bigClick").each(function(i) {
            var href = this.src.replace("_tn", "");
            $(this).wrap(
                $("<a>").attr("href", href).attr("target", "_blank")
            );
        });
    })
</script>
于 2013-03-05T12:33:24.030 に答える