■サムネイル(縮小画像)クリックで画面中央に拡大画像がポップアップ。
■拡大画像をマウスでドラッグすると、移動します。
■拡大画像をダブルクリックすると、消えます。
■拡大画像を消さなくても、他のサムネイルをクリックすると、連続で画像が切り替わります。
スクロールしても、常に拡大画像が画面中央にポップアップします。
拡大画像用のスペースを必要としない、とても便利なJavaScriptです。
このサムネイルのポップアップのJavaScriptは、拡大画像も縮小画像も、同じ画像を使用しています。
拡大画像は実寸表示ですが、ブラウザからはみ出るような縦幅の場合は、ブラウザの縦幅90%になるように max-height 指定がしてあります。
前回掲載分と動作は同じですが、JavaScriptは全くの別物で、ソースがとても短くなりました。
画像を簡単に中央配置にする方法はバシャログ。から。
画像をドラッグ移動する方法は「マウスドラッグによるオブジェクト移動のサンプル」から。
max-height指定の説明はHTMLクイックリファレンスから。
■拡大画像ポップアップだけで移動しない見本はこちら → スライドショー２９■面白２■サムネイルでポップアップ
■ポップアップで移動し、縮小画像と拡大画像が別の画像の見本はこちら → スライドショー３１■面白２■別画像サムネでポップアップ移動