及川WEB室｜ホームページ制作

HTML、CSS、JavaScript、スマートフォンサイト、Facebookなど、サイト制作に関する事をメモしています。
個人的な備忘録です。
及川WEB室 ホームページ制作HOME
及川WEB室 > JavaScript > 画像をかっこよく表示する lightbox

画像をかっこよく表示する Lightbox

2012/05/24
Lightbox は、画像をHTMLの同一画面上にかっこよくポップアップ表示してくれる オープンソースの JavaScript。
Lightbox2
※この記事を書いた時点（2012/05/24）では v2.51 (2012/4/20 リリース)。
※新しいバージョン（Lightbox v2.8.1 (2015/7/09 リリース)）については
　こちら >>Lightbox2の設置方法 - クリックで画像を拡大表示

サンプル

画像が1つの場合

下の写真をクリックしてみてください。
ページ全体が黒くなり、リンク先に設定している大きいサイズの写真が表示される。 ヘリコプターの画像

複数の画像を次々と表示させる

下の写真画像をクリック。
飛行機の画像 飛行機の画像 飛行機の画像
上の画像をクリックして表示した画像をマウスオーバーすると矢印が表示される。
表示された矢印をクリックすると、次の写真が表示される。
lightbox 複数画像

設置するHTMLの文字コード

今見ているこのページの文字コードはUTF-8。
shift_jisでも動作した。
shift_jisでのLightbox2サンプルページ

Lightbox2 設置方法

基本の設定

  1. スクリプトをダウンロード。
    Lightbox2
    ダウンロードファイルを解凍して出来た、lightbox フォルダを自分のサイトの任意の場所に設置。
  2. HTMLファイルのソースの head 内に下記を記述。 
    <script src="○○○/lightbox/js/jquery-1.7.2.min.js"></script>
<script src="○○○/lightbox/js/lightbox.js"></script>
<link href="○○○/lightbox/css/lightbox.css" rel="stylesheet" />
    ※注意：
    • 上記の「○○○/」の部分は、ご自分でlightbox フォルダを設置したパスに書き換える。
    • jquery-1.7.2.min.js（上記1行目） を lightbox.js（上記2行目） より先に読み込まないと、 lightbox.js が機能しないので注意。
  3. lightbox.js　(lightbox フォルダ内の js フォルダ内にある)の51行目付近を修正。
    下記の部分。 
    this.fileLoadingImage = 'images/loading.gif';
this.fileCloseImage = 'images/close.png';
    「images/loading.gif」と「images/close.png」の部分を修正する。
    画像2つ（ loading.gif と close.png ）までのパスをHTMLファイルからのパスに書き換える。
    この画像2つは、lightboxフォルダ内の、images フォルダ内に格納されている。

画像を表示させるためのタグの記述方法

アンカータグ（<a>タグ）に「rel="lightbox"」属性を追加する。
href属性 には表示させたい画像を記述。
title属性 は画像のキャプション。 
<a href="images/sample.jpg" rel="lightbox" title="キャプション">クリック</a>
複数の画像を次々と表示させる場合は、グループの設定をする。
グループにさせるアンカータグの rel="lightbox" に 角括弧（[]）にグループ名を入れたものを追加する。（rel="lightbox[name]" のように。） グループ名は任意の名前でOK。 
<a href="images/sample01.jpg" rel="lightbox[sample]" title="01">img01</a>
<a href="images/sample02.jpg" rel="lightbox[sample]" title="02">img02</a>
<a href="images/sample03.jpg" rel="lightbox[sample]" title="03">img03</a>
以上です。

Lightbox2.51 と SyntaxHighlighter3.0.83 が IE8 以下で動かない場合

同HTMLページ上に Lightbox2.51 と SyntaxHighlighte3.0.83 の両方とも設置したら、IE8以下で Lightbox が動作しなくなった。
ネットで検索して調べてみると、SyntaxHighlighter3.0.83 の shCore.js に原因があるらしい。
こちら↓を参照させて頂きました。ありがとうございます。
Lightbox Plugin - WebSurfer's Home
IE6, IE7, IE8の場合、syntaxhighlighter3.0.83 の shCore.js が原因で、 Lightbox2 のスクリプトが jQuery.js をきちんと参照できないらしい。直接の解決法は見つけられなかった。

対処法

Lightbox と SyntaxHighlighter を同時に使うには、SyntaxHighlighterを下位のバージョンにする。
SyntaxHighlighter3.0.83 ではなく、下位のバージョンのSyntaxHighlighter2.1.382 にしたら、Lightbox はIE6とIE8でもきちんと動いた。
SyntaxHighlighterは過去のバージョンもダウンロードできる。　 SyntaxHighlighter
また、スクリプトを書く順番は、SyntaxHighlighter の方を LightBox より先に記述するほうが良いもよう。
MENU Ξ