2017 081234567891011121314151617181920212223242526272829302017 10

スポンサーサイト 

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
トラックバック(-) | コメント(-)

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

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

実は 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://blog-imgs-11.fc2.com/u/n/i/universalmotorgerat/mootools.js"></script>
<script type="text/javascript" src="http://blog-imgs-11.fc2.com/u/n/i/universalmotorgerat/slimbox.js"></script>
<link rel="stylesheet" href="http://blog-imgs-11.fc2.com/u/n/i/universalmotorgerat/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://画像ファイル1URL" title="説明文1" rel="lightbox[hogehoge]"><img src="http://画像ファイル1URL"></a>
<a href="http://画像ファイル2URL" title="説明文2" rel="lightbox[hogehoge]"><img src="http://画像ファイル2URL"></a>
<a href="http://画像ファイル3URL" title="説明文3" rel="lightbox[hogehoge]"><img src="http://画像ファイル3URL"></a>


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

[2007/07/08 追記]

Slimbox 1.41 + mootools 1.11 に差し替え。

[関連記事] (事例)


[関連リンク]


[ 2007/05/27 20:28 ] blog | TB(2) | CM(0)   ブックマークに追加する
コメントの投稿













管理者にだけ表示を許可する
この記事のトラックバックURL
http://universalmotorgerat.blog94.fc2.com/tb.php/25-3fb0d4da

Slimboxを導入してみました。画像のサムネイルをクリックした際に、新しいウィンドウなどを表示せずに既存のウィンドウ内で元のサイズの画像を表示するようなスクリプトです。同様のものとしてはLightboxが有名で、他にも
最近流行ってますよね。 画像をグラフィカルにポップアップするjavascript。 といっても見かけるようになってもうずいぶん経ちます。 そんな...
[2010/04/06 13:06] MineField
Profile

ウニモグ

Author:ウニモグ
About - このブログについて
Credits - 利用素材などの記載
Contact - フォームによるお問合せ

Recent comments
Monthly Archives
ブロとも申請フォーム


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。