a-blog cmsでshadowbox.jsを使いたかったので、導入してみました。
流れとしてはこんな感じ？
- shadowbox.jsを取ってくる
- index.htmlにいろいろ設定する
- エントリする
shadowbox.jsを取ってくる
shadowbox.jsはここからダウンロードしてきます。
フォルダ名をshadowboxとかにリネームして、使っているテーマフォルダにアップロードしておきます。
index.htmlにいろいろ設定する
使っているテーマフォルダ内のindex.htmlにいろいろ設定します。
<head>
（略）
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
language: "ja",
players: ["img","swf"]});
</script>
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css" />
a-blog cmsはデフォルトでjQueryを使える様に設定されているので、別途jQueryをDLしてきて、読み込んであげる必要はありません。（ただし現時点で使えるjQueryのバージョンは、1.2.6）
あとplayersは、imgとswfが使えればいいかな？ って感じなので、とりあえずそれだけ読み込んでおきます。
エントリする
あとは投稿するだけなんですが、投稿の度にshadowboxを使いますよ～！ っていう記述を書くのは結構面倒…
なので、shadowbox用のユニットを作成してみました。
カスタマイズ管理>コンフィグ>編集設定>ユニットの追加ボタンを選択。
モードとラベルを設定し、保存。
ユニット設定に移動して、追加されたshadowboxのユニットに、テキストを追加。
タグをマークダウンにしておいて、あとはこんな感じに書いておく。
<p><a href="swfへのパス" rel="shadowbox;width=550;height=400;options={flashParams:{bgcolor:'#ffffff'}}" title="あああああ">あああああ</a></p>
で、保存。
エントリでshadowboxを使う場合は、このユニットを追加してあげて、パラメーターだけ変更してあげればOK。
他にもっといい方法がありそうな気がするけど…
- Newer: グローバル変数で出力されるもの
- Older: a-blog cmsのカスタムフィールドを使う際の注意点
Comments:2
- yamada 10-01-27 (水) 14:06
-
管理ページのコンフィグの中のエントリー本文のページからイメージビューワーの設定項目があるのですが、
デフォルトでは、 rel=”highslide” となっているのですが、そこをシャドウボックスの設定を入れる事でイメージビューワーでシャドウボックスを使うこともできるみたいですよ。 - あつのすけ 10-01-27 (水) 14:53
-
>yamadaさん
コメントありがとうございます！
教えて頂いたrel=”shadowbox”を早速試してみたところ、画像では上手くいきました。
しかしこの方法だと、画像のサムネイルをクリック→shadowboxは動作しますが、titleを指定する箇所がないっぽいですね。
あと試しに、ファイルからswfを選択してみたんですが、それだとshadowboxが起動しませんでした。（画像しか無理みたい…）
ここらあたりを考慮すると、まだユニットを使う方が便利かな？ と思ったりしています。
Trackbacks:0
- Trackback URL for this entry
- http://flabaka.com/blog/wp-trackback.php?p=2186
- Listed below are links to weblogs that reference
- a-blog cmsでshadowbox.jsを使ってみる from flabaka