Lightbox JS 設置の巻

imageせっかくなので、もうちょい詳しく…..いたってあっさりご紹介。

ブログ設置用に解説してみました。
といってもパスを絶対パスで書き換えるくらいです。わりと簡単なんよね。

1.ダウンロードする
 http://www.huddletogether.com/projects/lightbox2/

2.js css imagesフォルダをごっそりアップロードする
 ※フォルダ名は適宜修正

3. js内の lightbox.js の設定を修正する

 62-63行目
 var fileLoadingImage = “images/loading.gif”;
 var fileBottomNavCloseImage = “images/closelabel.gif”;

 をhttpから始まるパスに修正。
 例:
 var fileLoadingImage = “http://ドメイン/パス/images/loading.gif”;
 var fileBottomNavCloseImage = “http://ドメイン/パス/iimages/closelabel.gif”;

 ついでにcssフォルダ内 lightbox.cssの背景画像パスを修正
 48,53.54行目の3箇所。ココも絶対パスがいいかな。


4.ソースの貼り付け!ブログなら関連テンプレートを修正

 下の4行を<head></head>かどこか貼り付けてパスを適宜修正。
 ここもhttpから始まる絶対パスがいいね。

 <script type=”text/javascript” src=”js/prototype.js”></script>
 <script type=”text/javascript” src=”js/scriptaculous.js?load=effects”></script>
 <script type=”text/javascript” src=”js/lightbox.js”></script>
 <link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” />

 ↓
 例
 <script type=”text/javascript” src=”http://ドメイン/パス/js/prototype.js”></script>
 <script type=”text/javascript” src=”http://ドメイン/パス/js/scriptaculous.js?load=effects”></script>
 <script type=”text/javascript” src=”http://ドメイン/パス/js/lightbox.js”></script>
 <link rel=”stylesheet” href=”http://ドメイン/パス/css/lightbox.css” type=”text/css” media=”screen” />


5.あとは、画像を貼り付け!ふつうのリンクタグに属性をちょこっと追加するだけ

 1枚の時
 <a href=”images/image-1.jpg” rel=”lightbox” title=”コメント\”><img src=”画像\”></a>

 複数の時
 <a href=”images/image-1.jpg” rel=”lightbox[roadtrip]” title=”コメント\”><img src=”画像1″></a>
 <a href=”images/image-2.jpg” rel=”lightbox[roadtrip]” title=”コメント\”><img src=”画像2″></a>
 <a href=”images/image-3.jpg” rel=”lightbox[roadtrip]” title=”コメント\”><img src=”画像3″></a>


これで完成。お試しあれ!


ね、ほら意外と簡単でしょ?
このソースをはき出すプチフォトを「そのうち」お配りします。

Related Posts