Lightbox2 - ぷちWiki
最終更新日時：
いわゆる Lightbox な機能を提供する jQuery のプラグインです。
以前は、Lightbox, Thickboxがありましたが、それぞれ開発が終了してしまっているので、その代替となるものです。
公式サイトからアーカイブをダウンロードし、展開します。
展開して出来たディレクトリ内の必要なファイルを適宜設置します。
利用したい HTML 内には以下の記述を行います。
必要なファイルを読み込む。
拡大表示させたい箇所は以下のように記述。
data-lightbox という属性が、Lightbox2 に対応させる指定となります。
設定した値は、同一であれば同一グループとして見なすようです。
以前は、Lightbox, Thickboxがありましたが、それぞれ開発が終了してしまっているので、その代替となるものです。
使い方
公式サイトからアーカイブをダウンロードし、展開します。
% gzip -dc lightbox2.6.zip |tar xvf -
展開して出来たディレクトリ内の必要なファイルを適宜設置します。
| ファイル | 概要 |
|---|---|
| css/lightbox.css | Lightbox2 のスタイルシート |
| js/lightbox-2.6.min.js | Lightbox2 の JavaScript ファイル |
| img/ 以下の close.png loading.gif next.png prev.png | Lightbox2 で使用する画像。 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 に対応させる指定となります。
設定した値は、同一であれば同一グループとして見なすようです。