その場で画像を全画面に拡大するサンプル
(Intense Imagesスクリプト活用例)
下記のサムネイル画像をクリックすると、拡大版の画像がブラウザの描画領域全面に拡大されて表示されます。
画面(ウインドウ)と写真の縦横比が一致しない場合には、マウスポインタを画面の上下左右端に移動することで、隠れている部分へ自動スクロールします。
拡大画像をクリックすると、元の画面(今見ているページ)に戻ります。
-
このサンプルページを構成しているファイル群:
- ii.html (このページ)
- intense.min.js (Intense Imagesスクリプト本体)
- plus_cursor.png (拡大用マウスカーソル画像)
-
photosフォルダ
- (サムネイル画像) fallriver1mini.jpg , (拡大画像) fallriver1.jpg
- (サムネイル画像) forestlake2.jpg , (拡大画像) forestlake2.jpg
- (サムネイル画像) forestriver3.jpg , (拡大画像) forestriver3.jpg
解説記事に戻る