Lightbox JS v2.04 導入メモ
「なんでもかんでも撮りまくり」を FC2 で立ち上げたのだが、やたら重くて移動することにした。my brain は画像少なめなのでそのまま。
融通の利くブログがないもので、FC2 で我慢するか。と諦めかけた時、忍者ブログがなかなか使えそうな感じだったので、忍者ブログへ移行。FC2 に比べて人が少ないからか、比較的レスポンスもよかったし、移行もスムーズにいった。画像パスは変更しなくちゃいけなかったが、数があまりなかったので大した作業にはならなかった。Lightbox JS の導入にも慣れたもんで、導入はすぐ終わった。v2.04 でも正常に動くし一安心。
Lightbox JS v2.04 用の導入方法が記載されてるものが少なかったので、メモ。
つか、「そもそも Lightbox JS って何だよ？」って人は、「なんでもかんでも撮りまくり」でサムネイル画像をクリックしてみてください。スライドショーみたいのがはじまり、クリックするか十字キーの右左で画像をめくれます。今のところ、FC2 と 忍者ブログで動作実績あり。導入方法は下記のとおり。
１．ファイルをダウンロード
Lightbox JS のサイトに行き、Download からファイルをダウンロードする。
２．ファイル中のパス変更
Zip ファイルを解凍すると、いろいろとファイルがあるが、修正するファイルは「lightbox.js」と「lightbox.css」の二つだけ。
「lightbox.js」は50行目あたりにある
「lightbox.css」は17行目あたりにある
３．ファイルのアップロード
画像のアップロードと同じ方法で、「index.html」「image-1.jpg」「thumb-1.jpg」以外のファイルを全部アップロード。
４．head タグ内を変更
アップロードが終わったら、下記ソースを head タグ内に加えれば終了。
５．使い方
Lightbox JS を利用したい画像リンクやテキストリンクに、 下記のように rel を与える。tilte にコメントを入れると、ズームした際にコメントが入る。
複数の場合は、lightbox[sample] （sample 部は半角英数ならどんな名前でもOK）とか付け加えると、同じ sample とつけられた画像をスライドする。
融通の利くブログがないもので、FC2 で我慢するか。と諦めかけた時、忍者ブログがなかなか使えそうな感じだったので、忍者ブログへ移行。FC2 に比べて人が少ないからか、比較的レスポンスもよかったし、移行もスムーズにいった。画像パスは変更しなくちゃいけなかったが、数があまりなかったので大した作業にはならなかった。Lightbox JS の導入にも慣れたもんで、導入はすぐ終わった。v2.04 でも正常に動くし一安心。
Lightbox JS v2.04 用の導入方法が記載されてるものが少なかったので、メモ。
つか、「そもそも Lightbox JS って何だよ？」って人は、「なんでもかんでも撮りまくり」でサムネイル画像をクリックしてみてください。スライドショーみたいのがはじまり、クリックするか十字キーの右左で画像をめくれます。今のところ、FC2 と 忍者ブログで動作実績あり。導入方法は下記のとおり。
１．ファイルをダウンロード
Lightbox JS のサイトに行き、Download からファイルをダウンロードする。
２．ファイル中のパス変更
Zip ファイルを解凍すると、いろいろとファイルがあるが、修正するファイルは「lightbox.js」と「lightbox.css」の二つだけ。
「lightbox.js」は50行目あたりにある
fileLoadingImage: 'images/loading.gif',を http:// から始まるファイル保存場所のフルパスを調べて変更。
fileBottomNavCloseImage: 'images/closelabel.gif',
fileLoadingImage: 'http://(ファイルディレクトリ)/loading.gif',
fileBottomNavCloseImage: 'http://(ファイルディレクトリ)/closelabel.gif',
「lightbox.css」は17行目あたりにある
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }の url() に囲まれたパス部分を同じくフルパスに変更。
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
#prevLink:hover, #prevLink:visited:hover { background: url(http://(ファイルディレクトリ)/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(.http://(ファイルディレクトリ)/nextlabel.gif) right 15% no-repeat; }
３．ファイルのアップロード
画像のアップロードと同じ方法で、「index.html」「image-1.jpg」「thumb-1.jpg」以外のファイルを全部アップロード。
４．head タグ内を変更
アップロードが終わったら、下記ソースを head タグ内に加えれば終了。
<link rel="stylesheet" href="http://(ファイルディレクトリ)/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://(ファイルディレクトリ)/prototype.js"></script>
<script type="text/javascript" src="http://(ファイルディレクトリ)/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://(ファイルディレクトリ)/lightbox.js"></script>
５．使い方
Lightbox JS を利用したい画像リンクやテキストリンクに、 下記のように rel を与える。tilte にコメントを入れると、ズームした際にコメントが入る。
<a href="画像.jpg" rel="lightbox"><img src="画像.jpg" alt="画像名前" title="コメント" ></a>
複数の場合は、lightbox[sample] （sample 部は半角英数ならどんな名前でもOK）とか付け加えると、同じ sample とつけられた画像をスライドする。
<a href="画像.jpg" rel="lightbox[hukusu]"><img src="画像1.jpg" alt="画像名前1" title="コメント1"></a>
<a href="画像2.jpg" rel="lightbox[hukusu]"><img src="画像2.jpg" alt="画像名前2" title="コメント2"></a>
