lightbox2を使ってみた。

lightbox2を使ってみた。

実行例：


せっかくなので、ＦＣ２ブログへの導入方法だけメモっときます。

１．ダウンロード
以下のサイトから、lightbox2をダウンロード。

lightbox2

２．ファイルの修正箇所検索。
ダウンロードしたアーカイブ内には、cssとimageとjsファイルが
入ってるんですが、その内のcssとjsファイル内で画像のURLを
指定している箇所があるので、そこを修正する必要があります。

具体的には以下の箇所。・・・だけだったと思う（＾＾；
＃　とりあえず、ファイルを開いて「images」で検索してみて、
＃　あたれば修正を疑う。。。って感じでいいかもｗ

lightbox.js

LightboxOptions = Object.extend({
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',

lightbox.css

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

３．修正。
FC２ブログで画像をアップロードした場合のURLはほぼ固定なので、
調べて、絶対パスに置き換えてしまう。
例えば、こんな感じ。

'images/loading.gif' → 'http://***/***/loading.gif'

実際のURLは画像をアップロードしてみて、そのURLを確認すればOK。

３．アップロード
FC2の画像アップロードの機能を利用して、
css, images, jsファイルをアップロードする。

４．テンプレートに以下の内容を追記。
「テンプレートの設定」画面の中で、とタグの間に以下を追記。

<script type="text/javascript" src="http://****/****/prototype.js"></script>
<script type="text/javascript" src="http://****/****/effects.js"></script>
<script type="text/javascript" src="http://****/****/builder.js"></script>
<script type="text/javascript" src="http://****/****/lightbox.js"></script>
<link rel="stylesheet" href="http://****/****/lightbox.css" type="text/css" media="screen" />

※補足
lightbox2のホームページにはこんな感じで記載してあるんですが、
エラーになって動きませんでした。
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
調べると記載がおかしいとのこと。
（参考URL）
Lightbox2のエラー

とりあえず、設定はこれにて完了。

５．実際に使ってみる。
ＦＣ２ブログで「サムネイルで記事を書く」で画像を貼り付けてみるとこんな感じになる。
（上の実行例の場合）

<a href="http://blog-imgs-21.fc2.com/b/a/b/babyp/20080804234233.jpg" target="_blank"><img src="http://blog-imgs-21.fc2.com/b/a/b/babyp/20080804234233s.jpg" alt="view" border="0" /></a>

これを以下のように修正するだけ。

<a href="http://blog-imgs-21.fc2.com/b/a/b/babyp/20080804234233.jpg" rel="lightbox" target="_blank"><img src="http://blog-imgs-21.fc2.com/b/a/b/babyp/20080804234233s.jpg" alt="view" border="0" /></a>

具体的には、<a>タグのパラメータに「rel="lightbox"」を追加するだけ。

携帯から記事を書いた時に、勝手にaタグにlightboxを書く方法がほしいなぁ。。。
まぁ、そんなに更新せんけども（＾＾；

ではでは。