universal motor gerat

2008 07 ≪ 12345678910111213141516171819202122232425262728293031≫ 2008 09

Slimbox を使った javascript による画像表示を FC2ブログで

javascript によるスライドショー表示は lightbox が有名ですが、いかんせん巨大です。同等機能をもった軽量 javascript がいくつか出てますが、ここでは Slimbox という javascript をFC2ブログで設置してみました。おそらく lightbox や litebox よりも簡単じゃないかなと…

実は lightbox をダウンロードしたり、小粋空間さんの記事を読んだりしつつ動かしてて、デカイ・重い・面倒の三重苦って怖気づいていました…

しかし、Goodpic さんの記事で他にも沢山スライドショーするようなライブラリがある事を知り、1つくらいは簡単で軽いヤツもあるだろうと漁ってみました。

結論！ Slimbox 軽い、簡単。

設置については、buena suerte!さんの記事と、m・famiさんの記事を参考にして難なく完了。

FC2ブログではファイルアップロードで画像のみならず、 .css .js もアップロードできますので、スクリプト置き場に困ることもありません。FC2ブログの仕様ではアップロードされたファイルは、ブログのURL/file/*.* というURLでアクセス可能になるので、そこだけしか改変しませんでした。

つまり、Slimbox はアーカイブのディレクトリ関係なしにアップロード。mootools のライブラリは、mootools.js という名前でアップロードしただけです。

そしてテンプレートHTMLのHEADに以下の内容を追加…

<script type="text/javascript" src="http://universalmotorgerat.blog94.fc2.com/file/mootools.js"></script> <script type="text/javascript" src="http://universalmotorgerat.blog94.fc2.com/file/slimbox.js"></script> <link rel="stylesheet" href="http://universalmotorgerat.blog94.fc2.com/file/slimbox.css" type="text/css" />

これでOKで、あとはスライドショー表示したい画像を litebox と同じ書式でシルシを付けていけばいいだけです。

単一の画像をポップアップさせる場合は以下のような感じで…

<a href="http://画像ファイルURL" title="説明文" rel="lightbox"><img src="http://画像ファイルURL"></a>

rel="lightbox" が Slimbox を有効にする呪文で、lightbox 互換な表記です。

一まとまりの画像をスライドショーさせる場合は以下のような感じで…

<a href="http://画像ファイル１URL" title="説明文１" rel="lightbox[hogehoge]"><img src="http://画像ファイル１URL"></a> <a href="http://画像ファイル２URL" title="説明文２" rel="lightbox[hogehoge]"><img src="http://画像ファイル２URL"></a> <a href="http://画像ファイル３URL" title="説明文３" rel="lightbox[hogehoge]"><img src="http://画像ファイル３URL"></a>

スライドショーの場合は、識別用の文字列[hogehoge]という共通部分がある範囲でまとめて表示してくれます。