Lightbox2

最終更新日時:2014-03-12 19:26:59
jQuery

いわゆる Lightbox な機能を提供する jQuery のプラグインです。
以前は、Lightbox, Thickboxがありましたが、それぞれ開発が終了してしまっているので、その代替となるものです。

使い方


公式サイトからアーカイブをダウンロードし、展開します。

 % gzip -dc lightbox2.6.zip |tar xvf -


展開して出来たディレクトリ内の必要なファイルを適宜設置します。

ファイル概要
css/lightbox.cssLightbox2 のスタイルシート
js/lightbox-2.6.min.jsLightbox2 の JavaScript ファイル
img/ 以下の close.png loading.gif next.png prev.pngLightbox2 で使用する画像。
lightbox.css を置いた場所から ../img で参照できる位置に配置する


利用したい HTML 内には以下の記述を行います。

必要なファイルを読み込む。

 <script type="text/javascript" src="/js/jquery.js"></script>
 <script type="text/javascript" src="/js/lightbox-2.6.min.js"></script>
 <link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />


拡大表示させたい箇所は以下のように記述。

 <a href="xxxx.jpg" data-lightbox="lightbox01"><img src="xxxx-thumb.jpg" /></a>


data-lightbox という属性が、Lightbox2 に対応させる指定となります。
設定した値は、同一であれば同一グループとして見なすようです。

お問い合わせは 掲示板 にて。