スライドショー29■面白2■ サムネイルでポップアップ    UP日時 : 2015/03/21

■サムネイル(縮小画像)クリックで画面中央に拡大画像がポップアップ。
拡大画像をクリックすると、消えます。
■拡大画像を消さなくても、他のサムネイルをクリックすると、連続で画像が切り替わります。






スクロールしても、常に拡大画像が画面中央にポップアップします。
拡大画像用のスペースを必要としない、とても便利なJavaScriptです。
このサムネイルのポップアップのJavaScriptは、拡大画像も縮小画像も、同じ画像を使用しています。

前回掲載分と動作は同じですが、JavaScriptは全くの別物で、ソースがとても短くなりました。 画像を簡単に中央配置にする方法はバシャログ。から。

■ポップアップで移動し、縮小画像と拡大画像が同じ画像の見本はこちら → スライドショー30■面白2■サムネイルでポップアップ移動
■ポップアップで移動し、縮小画像と拡大画像が別の画像の見本はこちら → スライドショー31■面白2■別画像サムネでポップアップ移動