Lightboxを最新版にしたら動作がおかしくなった事などあって、Lightbox互換のSlimboxに変更しました。FC2ブログへの設置方法を、備忘録的にメモ。
Lightboxを一応解説すると、「サムネイルをクリック→同じウィンドウで拡大画像を表示する」という、あれです。下の画像をクリックしてみてください。
画像のグループ化や、拡大画像の下に解説を入れたりも出来るので、「イラスト系サイトでギャラリーみたいなのを作る」といった時に結構便利かと。→
Lightbox2公式サイト
Lightboxがうまく動かない
古いバージョンから最新版(v2.04)にしてみたら、いろいろおかしくなってしまった。
一部画像でLightboxが全く動作しない
これは自分のミス。
Lightboxを有効にする場合、
<a rel="lightbox" href="拡大画像のURL"><img src="サムネイル画像のURL" /></a>
という風に書かなきゃいけないけど、一部画像で「rel="
Lightbox"」という風に、Lを大文字にしてた。
古いバージョンは大文字と小文字を区別しなかったけど、v2.04は区別するようになってたので、大文字で始めていたものが動かなくなってた。
IE7とIE8でKB927917エラーが出る
特にIE7は重症で、ページが表示されない。
927917エラーはLightboxに限らず発生しうるエラーで、JavaScriptを書く場所・内容・他のJavaScriptとの干渉などが原因です。
いろいろ回避策はあるけど、Lightbox2自体の更新がなかば止まっているようだし、Slimboxに乗り換える事に。
Slimbox(jQuery版)
2007年頃はLightbox互換スクリプトがたくさん作られてたけど、流行も一段落ついて、更新されなくなったものが多いです。
今回選んだのは、SlimboxのjQuery版。以前はmootools版だけだったけど、久しぶりに見に行ったらjQuery版が出てた。
- Lightboxとほぼ完全に互換性があり、同じ書式で動く
- ファイル数が少ないし、ファイルサイズも小さめ
- FC2ブログで使う場合、ファイル編集がslimbox2.cssだけで済む(Lightboxはlightbox.jsとlightbox.cssを編集する必要がある)
- jQueryが使える
- 地道に更新が続いてる
FC2ブログに設置
Slimbox2公式サイトから最新版(2009/05/22時点で2.02)をダウンロードし、展開。
アップロード+slimbox2.css編集
- jsフォルダ内のslimbox2.jsをアップロード
- cssフォルダ内にある画像(closelabel.gif、loading.gif、nextlabel.gif、prevlabel.gif)をアップロード
- cssフォルダ内のslimbox2.cssを開き、画像パスをアップロードした画像のURLになるよう、書き換え
- slimbox2.cssをアップロード
slimbox2.cssの編集箇所は、loading.gif、prevlabel.gif、nextlabel.gif、closelabel.gifを指定している部分。
background: #fff url(http://blog-imgs-xx.fc2.com/e/x/a/example/loading.gif) no-repeat center;
background: transparent url(http://blog-imgs-xx.fc2.com/e/x/a/example/prevlabel.gif) no-repeat 0 15%;
background: transparent url(http://blog-imgs-xx.fc2.com/e/x/a/example/nextlabel.gif) no-repeat 100% 15%;
background: transparent url(http://blog-imgs-xx.fc2.com/e/x/a/example/closelabel.gif) no-repeat center;
FC2ブログテンプレートの書き換え
jQueryは、Google AJAX Libraries APIを利用。
jQuery公式サイトからファイルを手に入れてアップロードしてもいいけど、Google AJAX APIを使う方が簡単です。
で、テンプレートの<head></head>内に、以下みたいな感じで書く。
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
<script type="text/javascript" src="http://blog-imgs-xx.fc2.com/e/x/a/example/slimbox2.js"></script>
<link rel="stylesheet" href="http://blog-imgs-xx.fc2.com/e/x/a/example/slimbox2.css" type="text/css" media="screen" />
slimbox2.jsとslimbox2.cssのパス(緑色の部分)は、アップロードしたURLに書き換えてください。
使い方
基本書式
拡大画像へのリンク(aタグ)に、『rel="lightbox"』と書く。
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
拡大画像の下に画像のタイトルをつけたい場合は、『title="タイトル名"』を書く。
グループ化
aタグで呼び出す画像をグループ化する事で、簡単な画像ギャラリーを作れます。
グループ化したい画像へのリンクに、『rel="lightbox-グループ名"』または『rel="lightbox[グループ名]"』と書く。
<a href="images/image-1.jpg" rel="lightbox-cats">image #1</a>
<a href="images/image-2.jpg" rel="lightbox-cats">image #2</a>
<a href="images/image-3.jpg" rel="lightbox-cats">image #3</a>
グループはいくつでも作れます。ただし、1つの画像を複数のグループに入れる事は出来ません。
『lightbox[グループ名]』はXHTMLでは不適切なので、公式サイトでは『lightbox-グループ名』を推奨してます。
本家Lightboxとの互換性にあまりこだわらないなら、『lightbox-グループ名』の方でよいかと。
- TAG :
- JavaScript
- Web制作
- Lightbox
- Slimbox
- jQuery