Lightboxの使い方

Lightboxとは、写真をスライドショーするJavaScriptとスタイルシートを組み合わせたライブラリです。
バージョンは２つあります。

[参考記事] Lightboxスクリプト一覧
[参考記事] Lightbox2

Lightbox2の使い方
Lightboxが表示されないとき
配布ファイルのフォルダ構成

ダウンロード
Lightbox
Lightbox2

ただしLightboxはSSLのページには対応していないため、SSLのサイトに設置すると、次のようなSSLの警告が出ます。
SSL警告
この警告はlightbox.cssを読み込むだけで出るので、Lightboxを使用していないページでも、このCSSが読まれているとエラーとなります。

SSLのページで警告が出ないようにするためには、lightbox.cssの以下の行をコメントアウトするか削除することで、 警告は出なくなりますが、一部の機能は使用できなくなります。 

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }

rel="lightbox[groupname]" という感じでハッシュを使ってグループ化することで、複数の写真のグループを設定することもできます。

Lightbox2の使い方

まず上記のサイトからlightbox2.04.zipをダウンロードして解凍します。
(このファイル名はバージョンによって違います。)

解凍するとindex.htmlファイル、cssフォルダ、imagesフォルダ、jsフォルダがあります。
このindex.htmlはサンプルファイルです。つまりサンプルに使用されている画像がimagesフォルダに入っていて、image-1.jpgとthumb-1.jpgは実際には使用しません。

jsフォルダの中のlightbox.jsをテキストエディタで編集します。 

images/loading.gif
images/closelabel.gif
images/close.gif

この部分をLightboxを使用するページからの位置で読めるように書き換えます。

cssフォルダの中のlightbox.cssをテキストエディタで編集します。 

url(../images/prevlabel.gif)
url(../images/nextlabel.gif)

この部分を、このlightbox.cssからの位置で読めるように書き換えます。

cssフォルダ、imagesフォルダ、jsフォルダとそれぞれの中のファイルをサーバにアップします。

Lightboxを使用するページのheaderタグの部分に以下を書きます。 

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

画像のURLを指定したAタグ(リンクタグ)にrel="lightbox"を書きます。 

<a href="images/image-1.jpg" rel="lightbox">image #1</a>

これでリンクをクリックすると、Lightboxが作動します。

さらにAタグ(リンクタグ)にtitle="【見出し】"と書くと見出しとしてこの文字が表示されます。 

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Lightboxが表示されないとき

Lightboxが画面の中心に表示されず、画面の下のほうに現れるときには、lightbox.cssが正しく読み込めていません。

メインとなるサイトのスタイルシートにtitle属性が付いていたときには、lightbox.cssの読み込みタグにも同じtitle属性値をつけないと、読み込まれません。
[参考記事] title属性値が違うとCSSが読み込まれません 

<link rel="stylesheet" href="【サイトのスタイルシート】" type="text/css" title="main" />

配布ファイルのフォルダ構成

lightbox2.04
images
bullet.gif
close.gif
closelabel.gif
donate-button.gif
image-1.jpg
loading.gif
nextlabel.gif
prevlabel.gif
thumb-1.jpg
css
lightbox.css
js
builder.js
effects.js
prototype.js
scriptaculous.js
index.html
サンプルのHTMLファイル

関連記事

スポンサーリンク

DATE_SUB関数 日付の差を求める

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る