ホームページでスライドショー！
Updated:
今日は ホームページ の方をかまってみました。
今までは自分の ホームページ で公開している画像はそのまま貼り付けているだけでしたが、 ＷｏｒｄＰｒｅｓｓに導入したプラグイン「 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; }
ついでに、見にくいので整形しました（改行入れた）。
８．ＨＴＭＬソース修正
・以下のコードを <head>タグ 内に追加する。
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
・以下のコードを画像を表示するＨＴＭＬファイルの <body>タグ 内の最後（の直前）に追加する。
<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の読み込み部分を <head>タグ 内に記述するように説明があるが、それでは ＩＥ６ ではエラーとなってしまいます。 ・画像を表示するＨＴＭＬソースを作成・修正します。 以下は例：
<body>
・・・ 途中省略 ・・・
・・・ 途中省略 ・・・
</body>
※ちなみに当方では以下のブラウザで動作確認しています。
- FireFox3.0.6
- Opera9.63
- InternetExplorer6.0
設定は以上です。
これで、画像がカッコよく表示されるようになりました。 ついでに画像も増やしました。
よかったら見てみてください。 → → → こちら
また、いつかブログ上の画像もホームページでスライドショーできるようにしようかと思ってます。
それでは、おやすみなさい。
Comments