そらパパのメモ帳

家人が書いているブログにLightboxを入れてあげることに。

最新バージョンをダウンロードしてきます。

http://lokeshdhakar.com/projects/lightbox2/

解凍して、lightbox.jsをテキストエディタで開きます。

http://www.●●●●●●●●/lightbox/images/ を

書き換えます。

ブログのＵＲＬではなく、サーバーのＵＲＬを入れます。

フォルダ
・css
・images
・js
ファイル
・index.html

を家人が使っているさくらサーバーの

/home/ユーザー名/sblo_files/ブログ名/の配下にアップします。

ヘッダーに以下の行を追加します。

＜link rel="stylesheet" href="http://*****/lightbox/css/lightbox.css" type="text/css" media="screen"＞
＜script type="text/javascript" src="http://*****/lightbox/js/prototype.js"＞＜/script＞

＜script type="text/javascript" src="http://*****/lightbox/js/scriptaculous.js?load=effects,builder"＞＜/script＞
＜script type="text/javascript" src="http://*****/lightbox/js/lightbox.js"＞＜/script＞

*****部分は自分の環境に合わせて記述します。

ところがprototype.jsがバージョンが合わないのかIE９で

画面が黒くなってしまいます。

prototype.jpは最新バージョンをこちらからダウンロードします。

http://www.prototypejs.org/

これを、http://*****/lightbox/js/に上書きします。

これで完了です。

写真をアップするとき、rel="lightbox" title="タイトル"を

書き足すだけです。