Web作成再挑戦 / Litebox導入

Liteboxを導入してみる

画像をべたべた貼っているとどうしても重くなってしまうので、小さい画像・サムネイルを置いて、

　　・体裁を考えて大きい画像表示用ページにリンク

　　・大きい画像にリンクさせて表示はブラウザにゆだねる

のどちらかだが、画像表示用ページを用意にするのは面倒だし、ブラウザにゆだねるのは味気ない。そこで人気の画像表示用スクリプトのLightboxの導入を考えた。

Lightboxで調べてみるといろいろ派生版がある。その中でLiteboxがサイズ的に30kBと軽く機能も本家Lightboxと遜色ないのでこちらを選択。

Javaスクリプト、スタイルシートを読み込ませる設定をし、表示したい画像のリンクにrel="lightbox"追記、<body>タグを<body onload="initLightbox();">のように変更する。

Coolな感じの画像表示できてなかなかよい。

画像と関係ないページにはLiteboxスクリプトを読ませないように心がけるべきだとは思うが、ページを使い回しての楽な更新のためにとりあえず30kB目をつぶってみる。