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

Updated:


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

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

スライドショーもできるやつでした。 (JavaScriptでうごくやつです) その名は「 Lightbox JS v2.0 」です。

導入記録

1.アーカイブファイルのダウンロード

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

2.アーカイブファイルの展開

先ほどダウンロードした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

3.ファイルのコピー

展開したファイルをWebサーバへアップロードする。 ※当方の場合、ドキュメントルート直下に「 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

4.画像ファイルの準備

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

5.画像ファイルの準備(その2)

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

6.JavaScriptの修正

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

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

7.CSSの修正

※アーカイブファイルを展開したそのままを使用していれば以下は必要ありません。 当方のように別途フォルダを作成した場合のみ修正が必要です。 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; }

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

8.HTMLソース修正

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

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

・以下のコードを画像を表示するHTMLファイルの <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>タグ 内に記述するように説明があるが、それでは IE6 ではエラーとなってしまいます。 ・画像を表示するHTMLソースを作成・修正します。 以下は例:

<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>

タグにサムネイル画像、に実画像を設定します。 「 rel=”lightbox[terrano]” 」の terrano の部分が同じものでグルーピングされます。 「 rel=”lightbox[terrano]” 」を「 rel=”lightbox” 」とすれば、 スライドショーではなく、普通に1枚ずつの表示になります。

※ちなみに当方では以下のブラウザで動作確認しています。

  • FireFox3.0.6
  • Opera9.63
  • InternetExplorer6.0

設定は以上です。

これで、画像がカッコよく表示されるようになりました。 ついでに画像も増やしました。

よかったら見てみてください。 → → → こちら

また、いつかブログ上の画像もホームページでスライドショーできるようにしようかと思ってます。

それでは、おやすみなさい。





 

Sponsored Link

 

Comments