サムネイル画像をクリックすると 『 うにょ～ん♪ 』って感じで、ページ遷移しないで拡大画像が表示されるjQueryプラグインのLightbox。
◆Wikipedia ･･･ Lightbox ／ http://ja.wikipedia.org/wiki/Lightbox
同じ効果や機能を持つ類似のプラグインも含めて、導入されているサイトも多くなり、すっかりお馴染みとなりました。
しかし、Lightboxほど高機能じゃなくてイイから、JavaScriptを使ってお手軽にサムネイル画像を拡大表示できればと調べてみたのですが…。
《１対１》のスクリプトは見つかったのですが、複数のサムネイル画像に対応した《ｎ対１》のお手軽画像ビューワのスクリプトが見つからなかったので、ゴニョゴニョと自分でコードを書いてみました。
自分が実装する際は、サムネイル表示部分をPHPでサーバー側の画像フォルダにアクセスし、ディレクトリに格納されているサムネイル画像のファイル名を読み込んで配列化、foreach( )でブン回してサムネイル部分のHTMLを生成しているのですが、10枚程度の連番画像なら手打ちでも何とかなるでしょう。
主に使っているのは getElementById と onclick ですが、背景画像の透過とか閉じるアクションとか色々と…
例によって続きはWEBで･･･
※追記：2014/11/30
このブログの画像表示は、全てこの方法でLightbox風に表示しています。
