ホームページでスライドショー！

今日はホームページの方をかまってみました。

今までは自分のホームページで公開している画像はそのまま貼り付けているだけでしたが、ＷｏｒｄＰｒｅｓｓに導入したプラグイン「 LightBox2 」と同じように、サムネイルをクリックすると画像が大きくなるようにしたくなり、ググりながら調べて導入しました。

スライドショーもできるやつでした。（ＪａｖａＳｃｒｉｐｔでうごくやつです）その名は「 Lightbox JS v2.0 」です。

導入記録

１．アーカイブファイルのダウンロード

こちら（ http://www.huddletogether.com/projects/lightbox2/ ）の「 Download 」からＺＩＰファイルをダウンロードする。 ※当記事執筆時点では「 lightbox2.04.zip 」が最新でした。

２．アーカイブファイルの展開

先ほどダウンロードしたＺＩＰファイルを展開する。以下のようなファイルが格納されているはずです。

│  index.html
│
├─css
│      lightbox.css
│
├─images
│      bullet.gif
│      close.gif
│      closelabel.gif
│      donate-button.gif
│      download-icon.gif
│      image-1.jpg
│      loading.gif
│      nextlabel.gif
│      prevlabel.gif
│      thumb-1.jpg
│
└─js
        builder.js
        effects.js
        lightbox.js
        prototype.js
        scriptaculous.js

３．ファイルのコピー

展開したファイルをＷｅｂサーバへアップロードする。 ※当方の場合、ドキュメントルート直下に「 css 」、「 images 」、「 js 」をフォルダを作り、さらに「 images 」、「 js 」は他の画像ファイルや JavaScript と区別するために「 lightbox 」用のフォルダを作ってそこへファイルをコピーしました。展開してできた index.html、thumb-1.jpg は不要。

├─css
│      lightbox.css
├─images
│  └─lightbox
│          bullet.gif
│          close.gif
│          closelabel.gif
│          donate-button.gif
│          download-icon.gif
│          image-1.jpg
│          loading.gif
│          nextlabel.gif
│          prevlabel.gif
│          thumb-1.jpg
│
└─js
    └─lightbox
            builder.js
            effects.js
            lightbox.js
            prototype.js
            scriptaculous.js

４．画像ファイルの準備

元画像の他に元画像のサムネイル用画像を準備してＷｅｂサーバに配置しておきます。 ※当方ではドキュメントルート配下に「 images 」フォルダを作成しそちらに配置。

５．画像ファイルの準備（その２）

lightbox2.04.zip を展開してできたＣＳＳファイルそのままでは、ブラウザ上ではエラーはでないものの、Ｗ３Ｃ − ＣＳＳのチェックでエラーとなってしまうので、以下の「７」のように修正したが、そこで使用する画像「 blank.gif 」が lightbox2.04.zip には存在しません。 lightbox2.03.zip を別途ダウンロード・展開して「 blank.gif 」をＷｅｂサーバにアップロードしました。 ※「 lightbox2.04.zip 」はまだバグがあるみたい！？

６．ＪａｖａＳｃｒｉｐｔの修正

※アーカイブファイルを展開したそのままを使用していれば以下は必要ありません。当方のように別途フォルダを作成した場合のみ修正が必要です。 lightbox.jsを以下のように修正（以下は当方の場合）

fileLoadingImage:        'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',
　　↓
fileLoadingImage:        'images/lightbox/loading.gif',
fileBottomNavCloseImage: 'images/lightbox/closelabel.gif',

７．ＣＳＳの修正

※アーカイブファイルを展開したそのままを使用していれば以下は必要ありません。当方のように別途フォルダを作成した場合のみ修正が必要です。 lightbox.cssを以下のように修正（以下は当方の場合）

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
　　↓
#prevLink:hover, #prevLink:visited:hover { background: url(../images/lightbox/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/lightbox/nextlabel.gif) right 15% no-repeat; }

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

ついでに、見にくいので整形しました（改行入れた）。

８．ＨＴＭＬソース修正

・以下のコードをタグ内に追加する。

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

・以下のコードを画像を表示するＨＴＭＬファイルのタグ内の最後（の直前）に追加する。

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

※いろんなサイトでJavaScriptの読み込み部分をタグ内に記述するように説明があるが、それではＩＥ６ではエラーとなってしまいます。・画像を表示するＨＴＭＬソースを作成・修正します。以下は例：

<body>
・・・　途中省略　・・・

![TERRANO_01](images/terrano_01.jpg "TERRANO_01")

![TERRANO_02](images/terrano_02.jpg "TERRANO_02")

![TERRANO_03](images/terrano_03.jpg "TERRANO_03")

・・・　途中省略　・・・
</body>