Lightbox JS 設置の巻
せっかくなので、もうちょい詳しく…..いたってあっさりご紹介。ブログ設置用に解説してみました。
といってもパスを絶対パスで書き換えるくらいです。わりと簡単なんよね。
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>
これで完成。お試しあれ！
ね、ほら意外と簡単でしょ？
このソースをはき出すプチフォトを「そのうち」お配りします。
