2008

5/6

「Shadowbox」　設置説明　java script

Last modified: 2008年6月4日 （水）　 am 12時16分
Posted by jun  Published in java script

▼


前回の、 「Highslide.js」 に続いて、またまた画像などの表示スクリプト「Shadowbox」 の設置です・・・σ(^◇^;)ヒヤアセ

このスクリプトの特徴は、何といっても色々な「フレームワーク」に対応していることでしょう。対応している「フレームワーク」は、下記になります。
  • Yahoo! User Interface Library（YUI）
  • Ext
  • Prototype + Scriptaculous
  • jQuery
  • MooTools
  • Dojo Toolkit

そして、表示種類が豊富！！　「image」はもちろん　「flash」　「movies」　「web」　そして、特に面白いのが、「image map」などが表示できます。
「image map」というのは、一つの画像上の数か所だけを枠で囲って、その部分だけを拡大表示させる機能みたいです。

・・・・しかし、この設置説明では 「image」　「web」 のみ、動作確認してから説明しています・・・この２種が自分の使用目的なので・・・(;^_^A アセアセ　
追記・・・「Inline」の説明を追加しました。　（＾∀＾）　こちら

そして、「フレームワーク」は・・・「jQuery」で問題が起きると嫌なので、「prototype」を使おう！・・・と思い、設置してみたら・・・なんか、（；￢＿￢） ぁ ゃι ぃ　・・・そこで、「jQuery」の方にしてみたら・・・あれ？　全く問題なしだ！！　・・・ということで、「フレームワーク」は、「jQuery」を使っての説明になります。
追記・・・「prototype」の怪しかった原因は、自分の設定ミスだったため、その後「prototype」の設定方法も追記しました。　（＾∀＾）


設置してみて、思ったことは「設置」　「使い方」共に非常に簡単便利でした。　楽なのが好きな方には超おすすめ！！　見た目もいいしね～　（＾∀＾）


設定方法

こちらからダウンロード
・・・ダウンロード場所が２ヶ所あるみたいなのですが、よくわかりませんがとりあえず上の方の「sample」付きの「full」の方をダウンロードしました。

そして、解凍してできたフォルダ内にある 「build」 フォルダを「shadowbox」に名前を変更。

そして、同フォルダ内にある 「images」 フォルダと 「flvplayer.swf」 ファイルを、先ほど名前を変えた 「shadowbox」 フォルダ内に移動します。　そうすると・・・
  • 「shadowbox」フォルダ
    • 「css」フォルダ
      • 各種ファイル
    • 「images」フォルダ
      • 各種ファイル
    • 「js」フォルダ
      • 「adapter」フォルダ
        • 各種ファイル
      • 各種ファイル
    • 「flvplayer.swf」ファイル
 こんな感じの上下関係になります。

そして、名前を変えた 「shadowbox」 フォルダを、ご自分のスクリプト置き場に転送してください。（ここでは /wp-content/js/shadowbox/　に置いたものとして説明します。）
その他のファイル＆フォルダは使用には、必要ありません。

追記・・・「フレームワーク」に「prototype」を使用する場合は、こちら

次に「JavaScript」 と「stylesheet」を、外部リンクとして読み込ませるために<head>〜</head>の間に書き込みます。 自分の場合は、テーマエディタで「header.php」の問題無さそうな部分に書き込みました。
<link rel="stylesheet" href="http://example.com/wp-content/js/shadowbox/css/shadowbox.css" type="text/css" />
<script type="text/javascript" src="http://example.com/js/jquery.js"></script>
<script type="text/javascript" src="http://example.com/wp-content/js/shadowbox/js/adapter/shadowbox-jquery.js"></script>
 <script type="text/javascript" src="http://example.com/wp-content/js/shadowbox/js/shadowbox.js"></script>
※「jQuey」を既に使用している場合は、背景色が青の部分の「jquery.js」ファイルを読み込む必要はないです。(;^_^A アセアセ
※背景色が赤の部分で、「フレームワーク」に、「jQuery」を使用することを指定します。

さらに、</body> の手前あたりになるように下記を書き込みます。 自分の場合は、「footer.php」の上部に書き込みました。・・・テーマによって違う場合があると思うので確認してください。　ペコリ(o_ _)ｏ))
<script type="text/javascript">
$(document).ready(function(){
var options = {
};
Shadowbox.init(options);
});
</script>


使用方法

「image」 表示の場合

<a href="リンク先の画像アドレス" rel="shadowbox" title="タイトル名"><img src="サムネイルの画像アドレス" /></a>
と、普通に記述して「rel="shadowbox"」を付けるだけです。　黄文字部分はそれぞれあったものを指定してください。

「web」 表示の場合

<a href="リンク先のアドレス" title="タイトル名" rel="shadowbox" >テキスト</a>
と記述します・・・・上と同じじゃん！！　(;^_^A アセアセ
もちろん、テキストリンクじゃなく画像を使っても大丈夫です。
※ここで少しはまってしまったのですが、試しに自分のブログの記事を表示したくて頑張ったのですが・・・どうしても、普通にブラウザで開いてしまう・・・「Shadowbox」が使われない！！　・・・なんでだぁ～！！　・・・しかし、アドレスの最後に「index.php」などが付いていれば「Shadowbox」で開ける・・・しかし、記事にはファイル名がない！！　・・・どうすればいいの？？　と、しばらく試行錯誤した結果！！　やっと、解決法を発見！！　・・・方法はアドレスに「 www. 」が付いていれば「web」表示だと認識してくれるみたいです。　(;^_^A アセアセ　・・・そういうことだったのね・・・早速、「apache」の「Virtual」設定を変更して問題なく使用できるようになりました。　v(^o^")v
 

「Inline」 表示の場合

<a href="#inline" title="タイトル名" rel="shadowbox">Inline</a>
と、記述し、そして緑色文字の部分のリンク先を下記のような感じで上記の下あたりに記述します・・・記事内なら、どこでも良いのですが　（＾∀＾2）、
<div id="inline" class="hidden">
<p>ここに本文を記述します。<br />別に＜p＞タグで始めなくても構いません。<br />通常と同じでOK　（＾∀＾）</p>
</div>
緑色文字の名称は何でもいいですが、同じものにしてください・・・（＾∀＾2）、
水色文字の部分をスタイルシートに下記のように記述します。（スタイルシートはテーマの「style.css」でも「shadowbox.css」でも構いません。）
.hidden {
display: none;
}
と、すれば完了です・・・なんて簡単なのでしょうか！！・・・前回設置した・・・なんて「Inline」表示するのにどれだけ諦めようとしたことか・・・(TOT)


・・・ダウンロード先のサイトの説明を見てみたら、「flash」　「movies」 も同じ記述方法で大丈夫みたいです。（未確認）

・・・「image map」 も試してみようとしたのですが、思っていたのと違ったのでやめました・・・画像用意するのが大変そうだし　（＾∀＾2）、
ソースを見た感じでは、まず画像のサイズの高さと幅を指定してから<area>タグでそれぞれのリンク箇所を４個の数字で範囲を指定して作成し、リンク先の画像をそれぞれ指定するような感じでした・・・予想です！！　σ(^◇^;)ヒヤアセ
・・・最初知った時に思っていたのは、大きな画像を１枚用意してその部分だけを拡大表示してくれるのかと思っていました・・・予想と違って、ちょっと残念　(T^T)　しかし、「shadowbox」のすばらしさは変わりません！！　(⌒^⌒)ｂ　うん


オプション

rel="shadowbox"
のところを

rel="shadowbox;height=400;width=600"
と、することで枠のサイズを指定できます。

rel="shadowbox[group]"
と、[group]のところに適当な同じ名称のものを複数指定することで、グループ化され 「next」　「previos」 が表示されます。
グループ化して表示種類（image　web ・・・・）は別々なものを指定することも可能です。

rel="shadowbox;options={overlayOpacity: 0.5}"
と、することで背景色の透明度を変えることが出来ます。
※グループ化していた場合、ひとつだけに指定してもグループすべてに適用されるみたいです。　・・・グループ化していない場合は個別指定できます。
追記・・・修正　※グループ化しているとすべてがその透明度になるわけではなく、「next」　「previos」で移動した場合のみ、最初に表示させたものの設定が継続されるようです。

 ・・・ちなみに、複数指定する場合はこんな感じで記述します。
rel="shadowbox[group];height=400;width=600;options={overlayOpacity: 0.5}"
※枠のサイズ指定は、グループ化していても個別に指定可能です。

追記・・・
rel="shadowbox[group];options={counterType:'skip',continuous:true,animSequence:'sync'}"
と、記述すると表示したグループの画像の左下にデフォルトの「1 of 3」とかではなく「1 2 3」と表示されスキップ可能になります・・・グループ内のひとつだけに記述をした場合は、その画像を開いた時だけ「1 2 3」が表示されます・・・しかし「next」をクリックしても次の画像にも「1 2 3」が表示されています・・・グループ内の記述していない画像をクリックした場合は、「2 of 3」表示です・・・と、微妙な使い分けが出来ます。（＾∀＾）　もちろん、すべてスキップ表示にしたい場合はグループ内の画像すべてに記述します。

その他、詳しくはこちらを参照してください。　σ(^◇^;)ヒヤアセ


サンプル

かえでちゃん　（＾∀＾）かえでちゃん　（＾∀＾）　　
画像表示の場合

 
「web」表示の場合
「Inline」表示の場合




以上終了です。

人気度 : 75 %

「20点」　まったく役に立たなかったよ　。。｡･ﾟﾟ･(＞Д＜；)･ﾟﾟ･｡。。。「40点」　ちょっとだけ役に立ったかな　(T^T)「60点」　まぁ～まぁ～の記事だね　v（＾∀＾）v「80点」　良い記事だけど、あとちょっと・・・　(ノ´▽｀)ノオオオッ♪「100点」　探していたのはこの記事だ！！　(*ﾟ oﾟ*) マジっすか！？ (2 投票, 平均値/最大値: 4.5 / 5)

Previous Top



関係のある記事

14 users の書き込みがあります

Subscribe to this post コメント RSS or トラックバック URL
mygif
podolsky c-jp said in 7月 7th, 2008 at 18:08:37

こんにちは。

Shadowboxを使って動画を表現したいと思いまして、
頭脳外部メモリーさんのサイトに辿り着きました。

とりあえず、画像で試してみたんですが、Shadowboxが適用されないんです。

ソースは以下の内容で書きました。何か間違ってますか？

アドバイス宜しくお願いします。

シャドウボックステスト

window.onload = function() {
var options = {
loadingImage: ‘http://example.com/wp-content/js/shadowbox/images/loading.gif’
};
Shadowbox.init(options);
};

mygif
jun c-jp said in 7月 10th, 2008 at 22:02:40

podolsky　様　コメントありがとうございます。
・・・そして気付くのが遅くなってしまって大変申し訳ありません。　ペコリ(o_ _)ｏ))

・・・もう遅いかもしれませんが・・・
記述部分からするとフレームワークは「prototype」でよろしいでしょうか？

自分も説明できるほど詳しくはないのですが、思いつく限りのことを書いておきます。

自分も現在は「prototype」で使用しています。ソースを見てもらうと判ると思いますが、よければ参考にして下さい。

記述された部分は、フッターまたは下のほうの部分に記述されているわけですよね？
・・・アドレスの部分（http://example.com/wp-content/js/shadowbox/images/loading.gif）はもちろんご自分の環境にあわせましたよね？

その他のヘッダー部分の記述はどうなっていますでしょうか？
「prototype.js」や「scriptaculous.js」や「shadowbox-prototype.js」も記述されているでしょうか？もちろん「shadowbox.js」と「shadowbox.css」もですが

画像部分の記述部分に「rel=”shadowbox”」は付いていますか？

あと表示されない原因として思いつくものでは
「prototype.js」と「jquery.js」を一緒に使用していると衝突してうまくいかないです・・・解決方法はありますが、「jquery.js」は使用していますか？

自分が注意点として思いつくのはこんなところでしょうか？

mygif
podolsky c-jp said in 7月 25th, 2008 at 16:38:12

junさん、返事遅れてすいません＾＾；

あと、コメントの書き方が中途半端になってすいません。

まず、jqueryで使用したいと思ってます。

それとshadowboxをサイトからフルでダウンロードしたのですが、buildフォルダにCSSフォルダが入ってないのですが、これはdocフォルダの中のCSSの事でしょうか？

その部分でちょっと分からなくて困っていました。

ソースの書き方はjunさんの記述を参考にやってみたいと思います。

たびたびすいませんが、宜しくお願いします

mygif
jun c-jp said in 7月 25th, 2008 at 17:25:08

podolsky　様　コメントありがとうございます。

今shadowboxのサイトを見て気づいたのですが、バージョンが上がっているのですね・・・ダウンロードしてファイルを見てみましたが、確かにCSSフォルダがbuildフォルダにはないですね・・・

自分が使用した時点のバージョンは2.0の1個前(1.?)のものだったのでもしかすると結構変わってしまっていて、このページの説明は参考にならないかもしれません。

自分も今ちょっと忙しく試すことが出来ません・・・お役に立てず申しわけありません。　ペコリ(o_ _)ｏ))

mygif
podolsky c-jp said in 7月 25th, 2008 at 17:34:35

jun様

なるほど、バージョンが上がってたのですね。

自分も、もう少しjavaについて勉強したいと思います。色々試してみて頑張ってみます。

お忙しい所、ありがとうございました＾＾

mygif
podolsky c-jp said in 8月 6th, 2008 at 9:58:27

jun様

こんにちは。

shadowboxの件ですが、あれから色々検証してみましたら、フォルダの中にsrcフォルダがありまして、その中にもshadoubox.jsと必要なフォルダが入っていたので、試しにそれで設置してみたところ、上手くいきました＾＾。

基本的にはjun様のやり方でソースを打ったら、大丈夫だったです。

ありがとうございました＾＾

mygif
jun c-jp said in 8月 13th, 2008 at 8:43:01

podolsky 様

それは良かったです。
設置成功おめでとうございます。
v(^o^”)v

mygif
masa c-jp said in 10月 4th, 2008 at 14:05:09

こんにちは。

こちらの説明をおかげで簡単に設置できました。
ありがとうございます。

ひとつ質問させてください。
犬の画像を開いたとき、上にコメントが出ますが
（html上ではtitleタグで囲ったテキスト？）
これはどうやって表示されているのでしょうか？
tltleに入れても表示されません、、

また、YouTubeなどの動画にたいしても上部（又は下部）に
テキストを表示させたいのですが、、

質問ばかりですみません。
もし可能であれば教えていただけないでしょうか？

mygif
jun c-jp said in 10月 8th, 2008 at 8:28:33

masa 様　コメントありがとうございます。

上部に表示されるコメントはソースを見てもらうとわかると思いますが、自分の場合普通に<a>タグにtitleで記述しているだけです・・・

もしかしたら、自分が使っているバージョンは現在配布しているものより前のバージョンなので変更があったのかもしれませんが・・・

動画については、自分は全く使ったことないので分かりません・・・

全く参考にならず申し訳ないです・・・
ペコm(_ _;m)三(m;_ _)mペコ

mygif
masa c-jp said in 10月 14th, 2008 at 2:49:12

こんにちは。お返事ありがとうございます。
コメントについては自己解決しました。
というか、私の記述ミスでした、、ご迷惑おかけしました。

jqueryプラグインに関する記事は紹介ばかりで
実装方法について解りやすく解説されているサイトは
意外に少ないので、本当に助かりました。

今後もがんばってください！

mygif
kh2003 c-jp said in 10月 18th, 2008 at 2:57:46

初めまして、私もshadowboxを設置しようと頑張ってるんですがうまくいきません。
恐らくバージョンが上がってしまいフォルダ名等が変わってしまった為だとは思うのですが・・
どなたか親切な方、最新バージョンでの設置方法を教えていただけませんでしょうか？
宜しくお願い致します。

mygif
kh2003 c-jp said in 10月 18th, 2008 at 15:11:19

すみません、他のサイトさんに載っていたので自己解決致しました。
ですがやはりhtmlがうまく表示してくれません。

「apache」の「Virtual」設定を変更して問題なく使用できるようになりました

との事ですが、具体的に教えていただけませんでしょうか？
よろしくお願い致します。

mygif
jun c-jp said in 10月 18th, 2008 at 16:34:53

kh2003　様　書き込みありがとうございます。

「apache」の「Virtual」設定を変更して・・・と言うのは、自分のブログの場合アドレスを見てもらうとわかると思いますが、「apache」の「Virtual」設定で「www」が無い場合だけ指定してあったので、「www」を付けても平気なように指定しただけです。
（「Shadowbox」のhtmlリンクはリンク先のアドレス名にファイル名がない場合、「www」が記述していないとwebと認識してくれなく「Shadowbox」で表示されずに普通に開いてしまうためです。）

・・・ちなみhtmlが表示できないというのは、自サイトだけでなく普通のgoogleやyahooなども表示できないのでしょうか？
<a href="http://www.google.co.jp" title="タイトル名" rel="shadowbox" >テキスト</a>
と、記述した場合、「Shadowbox」でgoogle開けませんか？

mygif
kh2003 c-jp said in 10月 18th, 2008 at 19:29:21

大変申し訳ありませんが、htmlが表示しないというのは当方の単純な指定ミスによるものでした。
本当にすいません。
もちろんgoogle等もちゃんと開いてくれました。
ご丁寧な返信ありがとうございました。

コメントほしぃ～よぉ～　σ(^◇^;)

 お名前 (* 必須)

 メールアドレス (* 非公開)

 ウェブサイト (* 任意)