Lightbox v2.04 設置方法

2008年10月 7日 20:18
パソコン

写真をクリックすると画面にかっこよく表示させられるLightboxをMovable Typeで設置してみました。

最初はGoogleで検索した関連記事を見ながら設定をしていたのですが、ぜんぜん設置が行えなくて悪戦苦闘していたのですが、改めてLightboxの公式サイトを見直して旧バージョンと最新バージョンでは、<head>タグ内に入力するJavascriptの記述が違うのに気づき、やっとこ設置することが出来ました。

記念に設置方法を残してみたので興味のある方は参考に試してみてください。
分かれば簡単、ちゃんと説明を読めば誰でも出来ます。

①見本とLightboxとは？

設定する前にLightboxてなに？何ができるの？と疑問に感じた方は、下の画像をクリックしてみてください。見れば違いが分かるとお思います。

※Javascriptを有効にしておかないとうまく見れないので気をつけてください。
IE7でJavascriptの有効にする方法はこちら。

②ファイルのダウンロードと初期設定

こんなかっこいー！！記事を私のBlogに載せたいわーと思った方は、Lightboxの公式サイトへ進みダウンロードして初期設定へ進んでください。
なお、今(08.10.07)の時点でバージョンはv2.04です。ご注意してください。

ファイルをダウンロードできたら解凍してください。
解凍方法が分からない方はGoogleで検索してください。適当にフリーソフトがあります。

解凍ができたらjsフォルダにあるlightbox.jsとcssフォルダにあるlightbox.cssを編集したいので、テキストエディタで開いてください。なお、解凍直後はフォルダ名がlightbox2.04になっていますが、適当にlbjsなどに変更してみましょう。
お好きなフォルダ名でかまいませんが、本ページではlbjsで説明します。

■lightbox.jsとファイルの編集
49行目と50行目にあるGIFファイルへのリンクをhttp://からのフルパスで記載してください。

fileLoadingImage:'http://hogehoge.com/lbjs/images/loading.gif',
fileBottomNavCloseImage: 'http://hogehoge.com/lbjs/images/closelabel.gif',

※hogehoge.comは例えです。自分のホームページアドレスを記載してください。

■lightbox.cssファイルの編集
16行目と17行目にあるGIFファイルへのリンクをhttp://からのフルパスで記載してください。

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

※hogehoge.comは例えです。自分のホームページアドレスを記載してください。

③アップロードと確認

lightbox.jsとlightbox.cssを編集したらフォルダ(lbjs)ごと全てWWWサーバへアップロードしてください。
アップロードした後、フォルダ(lbjs)したのトップ階層にあるindex.htmlをIEで開いてください。
URLは「http://hogehoge.com/lbjs/index.html」になります。

ページが開いたらページ内にある画像をクリックしてみてください。

上手く出来ましたでしょうか？
出来た方は次へ、出来なかった方は残念ながら最初から試してください。がんばってください。

<head>タグの編集

Movable Typeで<head>タグが設定されているテンプレートを開き以下の記述を<head>タグから</head>タグの間に記述してください。

<script type="text/javascript" src="http://hogehoge.com/lbjs/js/prototype.js"></script>
<script type="text/javascript" src="http://hogehoge.com/lbjs/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://hogehoge.com/lbjs/js/lightbox.js"></script>
<link rel="stylesheet" href="http://hogehoge.com/lbjs/css/lightbox.css" type="text/css" media="screen" />

記述が終わったら、再構築してください。
※バージョンによって<head>タグへ記入する記述が違うので注意が必要です。
ここの部分が旧バージョンの記述で編集していたので、私はいっこうに設置出来ませんでした。