いい動きをしますよね。しかも、ページ上邪魔な大きな画像もこれならラクラク埋め込む事ができます。
では、Liteboxを導入する手順を解説します。
(注意：この文章はFC2ブログを使っている方メインの手順になりますのでMTなどを使用してるかたはコチラを参考にして下さい。)
1.ファイルをダウンロード
まずliteboxのサイトからlitebox-1.0.zipをダウンロードします。
色々ファイルが入っていますが、必要なのは以下のものだけ。
litebox-1.0.js
moo.fx.js
prototype.lite.js
lightbox.css
blank.gif
closelabel.gif
loading.gif
nextlabel.gif
prevlabel.gif
しかしこのままではサーバーにアップロードしても使えません。
"litebox-1.0.js"と"lightbox.css"内の項目をあなたのサイトに合わせて項目をいじる必要があります。
2."litebox-1.0.js"の修正
次に以下の赤文字の部分のように修正します。（20行〜）
//
// Configuration
//
var fileLoadingImage = "./file/loading.gif";
var fileBottomNavCloseImage = "./file/closelabel.gif";
var resizeSpeed = 6; // controls the speed of the image resizing (1=slowest and 10=fastest)
var borderSize = 10; //if you adjust the padding in the CSS, you will need to update this variable
3."lightbox.css"の修正
次に"lightbox.css"も同様に以下のように修正します。（45行〜）
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(./file/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(./file/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(./file/nextlabel.gif) right 15% no-repeat; }
4.アップロード
(1)で用意したファイルをツール→ファイルアップロードでブログのサーバーにアップロードします。
5.HTMLの修正
次にFC2ブログの環境設定→テンプレートの設定→編集で、HTMLファイルの<head> 〜 </head>間に以下の行を追加します。
<link rel="stylesheet" href="<%url>file/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="<%url>file/prototype.lite.js"></script>
<script type="text/javascript" src="<%url>file/moo.fx.js"></script>
<script type="text/javascript" src="<%url>file/litebox-1.0.js"></script>
6.記事を書く
あとは記事を書くときに以下のタグでLiteboxが使えます。
<a href="拡大画像URL" title="画像のタイトル" rel="lightbox"><img src="サムネイル画像URL"></a>
例はこのようになります。
<a href="http://blog-imgs-22.fc2.com/t/a/k/takmas/070123006_litebox.jpg" title="このようになります。" rel="lightbox"><img src="http://blog-imgs-22.fc2.com/t/a/k/takmas/070123006.jpg"></a>
これをアップロードするとこうなります。
7.導入完了
FC2ブログの場合以上の行程をコピペするだけでLitebox1.0を導入することができます。
もし不明な点がありましたらコメントされるか以下のサイトを参考にしてください。
2007.01.23 | Comments(2) | Web
