今更感はあるのだが、色々なところで結構前からlightboxを使っている人が多く、興味を持ってたのだが、なかなか導入していなかった。でもこの度なんとなく気が向いたので突っ込んでみることにした。
まずはlightbox”を導入するとこんな感じに画像が表示される。
←画像をクリックしてみてください。
web2.0風な感じに表示されちょっと格好いいのです。では導入したのを忘れないように記録しておく。
1「Lightbox JS」から必要な構成ファイルをダウンロードする。
* lightbox.js
* lightbox.css
* overlay.png
* loading.gif
* close.gif
２、ダウンロードした構成ファイルのlightbox.jsとlightbox.cssのfileを指定している部分のパスを自分のサーバーにあったようにパスを書き換える。ロリポップブログの場合はブログからアップロードできるファイルの種類はjpg、gif、png、swfに限られているので私の場合は自分のロリポップ内のplanting-field.comドメインサーバー内にファイルをアップしたので、そのlightbox.jsとlightbox.cssの該当部署を絶対パスに書き換える。
３、ダウンロードしたファイルをサーバーにアップする。もちろん自分用に書き換えたファイル
４、テンプレートを書き換える。書き換える場所は
<head></head>内に<link rel="stylesheet" href="http://planting-field.com/blog/light_v01/lightbox2.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://planting-field.com/blog/light_v01/lightbox2.js"></script>
上記のタグは私のブログ用です。ご自身のパスになるようちゃんと記載しましょう。私の場合はjs、css共にファイル名に番号を振っていますのでダウンロードしたファイルとは名前が変わっています。
これで設置は完了です。ノーマルな使い方の場合ですがこれで終わり。
このlightboxを使うにはリンク画像のパスにrel=”lightbox”というのを入れないと起動しません。要するにこんな感じ
<a href="http://■■" target="_blank" rel="lightbox"><img src="http://" border="0"></a>
このrel=”lightbox”が有ることによりスイッチになりlightboxが動くようになります。ただ、長いことブログをやっている場合は昔書いた記事の画像などはいちいち「rel=”lightbox”」を付け加えないと行けないわけです。それはめんどくさい。そんなわけで色々検索すると出てきました。
使ったカスタマイズ方法は小粋空間さんの「Lightbox JS の rel 属性を自動付与する」の中にある「１．rel 属性なしで Lightbox JS を起動する」と言うのを適用することにしてみます。これ以外の方法は「Movable Type」のブログ用ですので私のような普通のブログサービスを使っている場合は使えないと思います。
で、「１．rel 属性なしで Lightbox JS を起動する」を使うために「lightbox.js」を書き換えます。保存後再アップしたところ一応はrel=”lightbox”を入れていない画像リンクでもlightboxが起動するようになりました。ただ、「１．rel 属性なしで Lightbox JS を起動する」の方法に書いてあるパスだと拡張子「.jpg.gif.png」の小文字と大文字の区別がされてしまい、デジカメの種類によっては自動的に拡張子が大文字のJPG等になっている場合があるのでそれだと起動されません。そんなわけでちょっとコードに追加してみました。
if (anchor.getAttribute(“href”) && anchor.getAttribute(“href”).match(/jpg$|gif$|png$|JPG$|GIF$|PNG$/)){
上記のように拡張子で大文字を追加し、同じようにやったところ無事に全ての画像リンク部分が拡張子の大文字小文字関係なくrel=”lightbox”記述が無くてもlightboxが起動するようになりました。
本当は最新版のLightbox JS v2.0を最初導入し、いろいろテストをし使えるようになったのですが、今までの記事にrel=”lightbox”を再入力するのが面倒で小粋空間さんの「Lightbox JS の rel 属性を自動付与する」を使ってその手間を省こうと思った場合、最初のバージョンのLightbox JSじゃないと私はやり方が解らなかったのでこっちのバージョンに戻して導入してみました。基本的にはLightbox JS v2.0のほうが格好いいですね。機能もアップしていますから・・・。2.0でも同じ方法使えないかいろいろチャレンジしてみましたが、私にはさっぱり解りませんでした。そんなわけでとりあえず今のような状態で行きたいと思います。
＊もうひとつのブログで使ってるFC2の方にはLightbox v2.0を導入してみました。その記事はこちら
2006.5/29追記
上記でLightbox2でのrel=”lightbox”を入れないで使う方法が解らないって書きましたが、その回避方法が判明したのでこちらの記事で記載しておきます。 と、言うことで現在このブログではLightbox2を使っております。
コメント