例えば、上の画像をクリックすると、スムーズに画像が拡大されると思います。これはFancyZoomというJavaScriptを使っているからです。
アニメーションや影があったり良い感じです。しかし、これを使うにはルートフォルダに階層を作って、幾つかファイルをアップロードしなくてはなりません。
しかし、私が使っている忍者ブログもそうですが、階層を作ることはできません。だから、ブログのファイルアップロードだけで使えるように、FancyZoomを勝手に改造しました。(まあ、ちょっとの改造です。)
<head> <script type="text/javascript">var FileDir = 'http://file.' + '<!--$g_user_id-->' + '/';</script> <script src="http://file.<!--$g_user_id-->/FancyZoom.js" type="text/javascript"></script> <script src="http://file.<!--$g_user_id-->/FancyZoomHTML.js" type="text/javascript"></script> </head>
<body onload="setupZoom();">
ついでに、私が使いやすいように独断と偏見で仕様を変更しました。
オリジナルでは、<a>のtitle属性が、画像の説明として読み込まれます。
<a href="iamge.jpg" title="説明"><img src="thumbnail.jpg" alt="説明" /></a>
しかし、私はリンクにtitle属性を付ける習慣が無いし、忍者ブログは画像にalt属性を付けてくれるので、alt属性から説明を取得するようにしました。
<a href="iamge.jpg"><img src="thumbnail" alt="説明" /></a>
また、画像が複数ある場合、最初の画像からズームインします。
オリジナルでは、リンク先が画像という条件でプログラムが実行されました。しかし、改造版では、リンク先が画像で、中に<img>があることを条件にしました。
これは、alt属性を付けられるのが<img>だけだからです。
次の機能は、オリジナルに最初からあります。
| [shift] + クリック | 遅くズームイン(アウト)する |
|---|
<a>を次のようにすると、ズームが無効になります。
<a href="iamge.jpg" rel="nozoom"><img src="thumbnail" alt="説明" /></a>
<head> <script type="text/javascript">var FileDir = 'http://file.gmr.blog.shinobi.jp/';</script> <script src="http://blog.cnobi.jp/v1/blog/user/354f95828a2d0bef40423056b5f3ea60/1205671431" type="text/javascript"></script> <script src="http://blog.cnobi.jp/v1/blog/user/354f95828a2d0bef40423056b5f3ea60/1205673436" type="text/javascript"></script> </head>
また、忍者ブログじゃないんですけど、という人もURLを直接指定すれば使えると思います。
実は私も最初、FTPサーバーを別にレンタルして使いました。作業が終わった後、もうちょっと弄ればブログでも使えることに気がついてこうなりました。
JavaScriptの勉強の為に遊んだ感じなので、かなり適当です。何かあったら、ツッコミを入れてください。あと、ソースは丁寧にコメントしてありましたが、英語だったので、そこらへんで苦労しました。
画像まで付属させたのは、アップロード時にリネームされなそうなファイル名にリネームしたからです。
3/19 FileUrlは間違ってる気がするので、FileDirにしました。
3/21 Ctrl+クリック とかはFirefoxの機能でした。
Liz (おほう)さん / 2009/04/07(Tue) / 編集Liz (おほう)さん / 2009/04/07(Tue) / 編集
