■サムネイル(縮小画像)クリックで画面中央に拡大画像がポップアップ。
■拡大画像をマウスでドラッグすると、移動します。
■拡大画像をダブルクリックすると、消えます。
■拡大画像を消さなくても、他のサムネイルをクリックすると、連続で画像が切り替わります。
スクロールしても、常に拡大画像が画面中央にポップアップします。
拡大画像用のスペースを必要としない、とても便利なJavaScriptです。
拡大画像は実寸表示ですが、ブラウザからはみ出るような縦幅の場合は、ブラウザの縦幅90%になるように max-height 指定がしてあります。
このサムネイルのポップアップのJavaScriptは、拡大画像と縮小画像は、違う画像を使用しています。
同じ画像でも違う画像でも、JavaScriptのソース部分は同じです。
違うのは body に記述するサムネイル指定の記述方法だけです。１行目で説明すると、
同じ画像の時は、
<img src="gat25.jpg" onClick="a('this.src')" title="三隻の帆船">
違う画像の時は、
<img src="s1.jpg" onClick="a('gat25.jpg')" title="三隻の帆船">という記述になります。
「s1.jpg」が、縮小用に作成した別画像です。
大量のサムネイル画像を表示する時は、小さな別画像を作成した方が PC に負担がかかりません。
画像を簡単に中央配置にする方法はバシャログ。から。
画像をドラッグ移動する方法は「マウスドラッグによるオブジェクト移動のサンプル」から。
max-height指定の説明はHTMLクイックリファレンスから。
■拡大画像ポップアップだけで移動しない見本はこちら → スライドショー２９■面白２■サムネイルでポップアップ
■ポップアップで移動し、縮小画像と拡大画像が同じ画像の見本はこちら → スライドショー３０■面白２■サムネイルでポップアップ移動