ightboxのjsファイルの日本語化カスタマイズ2
以前lightboxのjsファイルの日本語化カスタマイズについて記事を書いた。そのときの補足で、各種フォルダーの位置を変更したときの対処法を備忘録も兼ねて書いておく。
まず一番参考になるのはマイコミのページ。そこに書いてあるとおり、各種ファイルをフォルダ毎アップロードする。フォルダー構成は下記の通りとして、temp.htmlにlightboxを設置するとする。
+-CSS
+-js
+-images
+--temp-temp.html
マイコミのページの通りで設置しても正常に動作しない。どうすれば動作するか変更点を記述する。
参考になるページはLightBoxの使い方とカスタマイズのページ。
まず1番目。
1.<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
2.<script src="js/prototype.js" type="text/javascript"></script>
3.<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
4.<script src="js/lightbox.js" type="text/javascript"></script>
この4行、それぞれcssとjsのフォルダーのリンク先を一つ上のフォルダーに変更する必要がある。つまり「../」を付ければよい。
1.<link rel="stylesheet" href="../css/lightbox.css" type="text/css" media="screen" />
2.<script src="../js/prototype.js" type="text/javascript"></script>
3.<script src="../js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
4.<script src="../js/lightbox.js" type="text/javascript"></script>
とこのように変える。
画像(63x32)
prevlabel.gif
次にlightbox.cssの中にある16行目、17行目にある
url(../images/prevlabel.gif)
の所、必要に応じて書き換える。今回の場合は、これでよい。ここで、prevlabel.gifは「PREV」の画像。これを置き換えると画像が変わる。
次にlightbox.cssの中にある16行目、17行目にある
url(../images/prevlabel.gif)
の所、必要に応じて書き換える。今回の場合は、これでよい。ここで、prevlabel.gifは「PREV」の画像。これを置き換えると画像が変わる。
最後にlightbox.jsの50行目
../images/closelabel.gif
をフォルダーの位置を書き換える。
これで動くようになる。