Lightboxのような透過レイヤー表示の実装サンプル （Lightbox Effect）

スライドショー表示JavaScriptとして有名なLightbox。ナビゲーションや表示エフェクトなどスライドショーの定番になりつつある。Lightboxがスライドを表示する際に、濃いグレーの透過レイヤーなどエフェクトを作成する方法を紹介しているのが、PJ Hyett。

実装に必要なコードを紹介している。実装する際に必要になるのは、スタイルシート、JavaScriptコード以外にも、prototype.jsが必要になるので、別途用意しておく必要がある。

透過レイヤーの表示
Lightboxも透過レイヤー表示にはPNG画像を利用している。また、CSSコード中でAlphaImageLoaderをIE用に記述している。後半部分には透過PNGを利用しないopacityでの実装方法も紹介されているので、そちらも参考にしていただきたい。

実装までに、手間がかかりそうだが１度導入してしまえば、いろいろな場面で利用できるので便利に利用できる。wayfaring.comでも同じ透過レイヤー表示を利用しているので、実装されているコードを参考にチャレンジしてみてはいかがだろうか。