Movable Type 備忘録

 shadowbox.js を使ってみる

  • Mar082008
  • Vote:
    http://bizcaz.com/archives/2008/03/08-202627.php
  • Categories: JavaScript
  • Tags:
  • Social Bookmark

こんにちわ^^

危険なページを自分の代わりにチェックしてくれるサイトを教えてもらいました。

わたしの場合、危ないと分かっててそのページを表示することはなくって、むしろ気づいたら危ない目に遭う･･･という方が多いかな。
試しにわたしのサイトやってみたら、サイト内のリンク先の安全性をチェックした結果をイメージにして表示してくれるようです。

わたしはあまり活躍しそうにないけどブクマしておくといいかも、です。

さて、shadowbox という JavaScript を使ってみました。
カンタンに言うと shadowbox は lightbox のようなものです。ようなものなんだけど、かなりの優れものぉ～ (●＞∀＜●)／

サンプルを表示できませんでした。

[2008.12.23] 最新バージョン( ver2.0 )の shadowbox に合わせて記事を修正しました。

shadowbox の良いところは lightbox のように prototype 専用というわけではなくって、 jQuery や mootools などいろんなフレームワークに対応しているところです。
また、イメージファイルの表示だけじゃなく、動画やウェブページの表示もできます。

フレームワークごとに使い分ける

以下に対応してるフレームワークを一覧します。

アダプタという形で対応するフレームワークのライブラリをロードするようなしくみになってます。
配布元では YUI を使用してますが、わたしのサイトでは prototype 版を使用してます。
その場合は以下のように HTML ヘッダ（<head>～</head>）内に記述します。

HTML ヘッダ記述例

  1. <script type="text/javascript" src="http://●●●.com/src/adapter/shadowbox-jquery.js"></script>
  2. <script type="text/javascript" src="http://●●●.com/src/shadowbox.js"></script>
  3. <script type="text/javascript">
  4.  
  5. Shadowbox.loadSkin('classic', 'http://●●●.com/src/skin');
  6. Shadowbox.loadLanguage('en', 'http://●●●.com/src/lang');
  7. Shadowbox.loadPlayer(['img', 'html'], 'http://●●●.com/src/player');
  8.  
  9. $(document).ready(function() {
  10.     Shadowbox.init();
  11. });
  12. </script>

赤字の部分をお使いのフレームワークに合わせて変更します。 各ライブラリは adapter/ フォルダの中に入ってますので、必要に応じてロードすれば OK です。 青字はアップロード先の shadowbox の URL を指定します。
緑字は使いたいメディアフォーマットを指定します。わたしサイトでは画像表示と外部ページ表示のみなので、'img'、'html' を指定してます。

基本的な使い方

基本的な使い方は lightbox と同様でアンカーの rel 属性に 'shadowbox' と記述するだけで使えます。

  1. <a href="images/▲▲▲.png" rel="shadowbox"><img alt="タイトル" src="images/▲▲▲.png" width="320" height="240" /></a>

また、フォトギャラリーみたいな表示する場合には、複数の画像をグループ指定する必要があったり、幅と高さを任意のサイズに指定することもできます。
基本的にはサンプルが添付されてますのですぐに分かると思います。

以上で shadowbox を使用することができました。
圧縮ファイル中の build/ フォルダの中すべてと、src/skin/ フォルダ、flvplayer.swf をアップロードすれば基本的には OK です。

わたしの場合は以下のようなディレクトリ構成として使用してます。

  1. http://bizcaz.com/
  2. 　|
  3. 　+-- js/
  4. 　| +-- shadowbox/
  5. 　| | +-- flvplayer.swf
  6. 　| | +-- shadowbox.js
  7. 　| | |
  8. 　| | +-- adapter/
  9. 　| | | +-- shadowbox-base.js
  10. 　| | | +-- shadowbox-prototype.js
  11. 　| | | +-- shadowbox-jquery.js
  12. 　| | | +-- shadowbox-mootools.js
  13. 　| | | +-- shadowbox-yui.js
  14. 　| | | +-- shadowbox-dojo.js
  15. 　| | | +-- shadowbox-ext.js
  16. 　| | |
  17. 　| | +-- lang/
  18. 　| | | +-- shadowbox-ar.js
  19. 　| | | :
  20. 　| | | :
  21. 　| | | +-- shadowbox-zh-TW.js
  22. 　| | |
  23. 　| | +-- player/
  24. 　| | | +-- shadowbox-flv.js
  25. 　| | | +-- shadowbox-html.js
  26. 　| | | +-- shadowbox-iframe.js
  27. 　| | | +-- shadowbox-img.js
  28. 　| | | +-- shadowbox-qt.js
  29. 　| | | +-- shadowbox-swf.js
  30. 　| | | +-- shadowbox-wmp.js
  31. 　| | |
  32. 　| | +-- skin/
  33. 　| | | +-- class/
  34. 　| | | | +-- skin.css
  35. 　| | | | +-- skin.js

以上です。

 Trackback Pings(3)

from TomoMiXの日記･Windows&Mac関連ソフト紹介ブログ「TRASH」

Shadowbox 上記サイトをまずご覧ください。 自分のブログでは適用できなかったので（かなり残念）デモも使用方法も詳しく書けません。このSha...

Tracked on March 11, 2008
from Kyooto-きょおと-京都｜Blog-ぶろぐ-ブログ

京都の地図で使っていたjquery動画表示用のYouTubeプラグインをやめてShadowboxに変更しました。 これで、大きい画面でビデオが楽しめ...

Tracked on April 13, 2008
from caraldo.net | MT Blog

最近JavaScriptにはまって色々勉強しています。 まだまだ全然読み解けないのですが、サンプルをちょこちょこいじって、何となくやりたい事が出来るように...

Tracked on April 23, 2008

 Comments(19)

#1: Posted by 哲やん @ March 9, 2008 [REPLY]
user-pic

いつもナイスなネタをありがとうございます。
「フォトブログに最適・・・」なんて思いながらも写真を撮っていませんでした（笑）

英語がまるっきしダメなので、日本語レクチャー、感謝しています。
時間がある時にでもこちらでいろいろテストしてみようと思っています。
ありがとうございました。

 
#2: Posted by Author Profile Page bzbell @ March 9, 2008 [REPLY]
user-pic

>>1 哲やん さん

こんばんわ^^

> 「フォトブログに最適・・・」なんて思いながらも写真を撮っていませんでした（笑）
わたしもですあせあせ
センスがないのでうまく撮れなくってサングラス
> 時間がある時にでもこちらでいろいろテストしてみようと思っています。
けっこういろんなことできるから試してみてください。
Highslide と Shadowbox あれば完璧!! な気がしてる今日この頃ですテレテレ

 
#3: Posted by 哲やん @ March 11, 2008 [REPLY]
user-pic

ブログだけではなくても最近はJAVAスクリプトが大流行ですね。
と感じるのは情報不足の「お年寄り」なのかもしれません（笑）

最近入社の頭の柔らかいスタッフにいろいろ教えてもらっているんですが、なかなか理解できないでいます。
私の勉強先は「ここ」と決めていますので、今後ともよろしくです。

写真のセンスは・・・もちろんないです。女性のように大胆な「切り取り」方ができなくて・・・（笑）

ビジネスブログ用テンプレートなんかあったら、一緒にお仕事、してしまいそう・・・

 
#4: Posted by Author Profile Page bzbell @ March 11, 2008 [REPLY]
user-pic

>>3 哲やん さん

こんにちわ^^

> ブログだけではなくても最近はJAVAスクリプトが大流行ですね。
そうですねぇ、Ajax が広く認知されたから…と聞いたことがあります。
わたしのサイトも JavaScript 必須になってます。

> 私の勉強先は「ここ」と決めていますので、今後ともよろしくです。
わたしで分かることでしたらいつでもどうぞもじもじ
でも本職!? の若いスタッフさんの方がいろいろ知ってると思いますよ。なんせわたしは自称サンデープログラマーですからあせあせ興味あることしか覚えませんからキャハハ

 
#5: Posted by Author Profile Page *yu @ June 13, 2008 [REPLY]
user-pic

こんばんは～チュ！
shadowbox、なぜか適応できないんですけど・・・丸一日格闘してますあせあせ
配布元のコードとbzbellさんのコードを参考にしてるんですけど・・・どこか注意することってありますか？はて？

 
#6: Posted by Author Profile Page bzbell @ June 13, 2008 [REPLY]
user-pic

>>5 *yu さん

注意点ですか…う～んガーン
特に注意することはこれといってないですが、lightbox との併用はできないのと、prototype のバージョンに依存するかも!?ってくらいでしょうかあせあせ
お使いの JavaScript フレームワークは prototype ですか!?

> …適応できない

ってどんなかんじになるんですの!?

 
#7: Posted by Author Profile Page *yu @ June 14, 2008 [REPLY]
user-pic

prototypeです！
バージョン確認してみますね。

lightboxは使っていませんが、highslide導入してます。
ページを表示したいんですが、普通のリンクとして認識されてるみたいですあせあせ

Event.observe(window, "load", function() {・・・っていうのはどこに書いても大丈夫なんですか？

 
#8: Posted by Author Profile Page bzbell @ June 14, 2008 [REPLY]
user-pic

>>7 *yu さん

JavaScript エラーが出てたりはしませんか!?
エラーすると中断されてしまうので正しく表示できません。

もしくは、具体的にエラーとなるページを見せていただくことはできますか!?

 
#9: Posted by おさえもん @ June 18, 2008 [REPLY]
user-pic

こんばんは。
以前、フォーラムでお世話になりましたおさえもんと言います。
その節は大変お世話になりました。

ところで、shadowboxの導入で教えていただきたいことがあり、書き込みました。
現在、MT4.1にhighslideを導入しております。
で、こちらでshadowboxのことを知り、shadowboxとhighslideを使い分けしたいと考えているのですが、その場合、
１　上記のeffectbox.jsのどこかを書き換えればいいのか。
２　3月8日の追記　タグの自動挿入でImage,pmに「331 行目に以下のコードを追加する」とありますが、MT４．１の場合、331行目でよいのか。

一応、effectbox.jsについては、
'lightbox': {init: 0, base: 'http://●●●.com/js/prototype/lightbox/', func: this.markup_lightbox },
の部分を削除の上、あとは、自分のサーバーに合わせて書き換え既にアップしています。
また、Image,pmについては、書き換えてみましたが、ダッシュボードを開こうとしたらエラーが出てしまいました。

どうか、よろしくお願いいたします。

 
#10: Posted by Author Profile Page tomo @ July 7, 2008 [REPLY]
user-pic

はじめましてブイブイ
shadowboxについて色々調べていたらこちらにたどり着きました。

shadowboxを「shadowbox-prototype」「shadowbox-base」などで設置し、
動作を確認はできたのですが、どうしてもIE7、6で表示速度が遅くなることを確認しています。エーン
※Firefox3、Opera9.5ではこの遅くなる現象は確認できませんでした。

shadowboxの公式サイトでも同様の現象が確認できているのですが、
おどろいたことにこちらのbzbellさんのサイトのサンプルではこの現象は
確認できず、動作速度が速いことに驚いています。

自分なりにjsの中をいじったり、htmlの方を削ったりするなど試行錯誤しては
みたのですが、どうしても動作の改善ができませんでした。。あせあせ

もしこの動作速度改善につきまして、お心当たりがあれば
少しヒントだけでもお教えいただくことはできますでしょうか？


 
#11: Posted by Author Profile Page bzbell @ July 7, 2008 [REPLY]
user-pic

>>10 tomo さん

こんばんわ^^

ご質問の件ですが、たぶん shadowbox のコードに関しては tomo さんと大差ないと思います。違いがあるとすれば prototype.js でしょうか。

わたしのサイトで使用してる prototype は通常のものとは違うんです。
かなりパックされたものを使用してます。
単純にロードの時間の差かもしれませんよワクワク

わたしが使ってる prototype は以下のページのものです。
http://bizcaz.com/archives/2008/02/16-000150.php

ご参考までにもじもじ

 
#12: Posted by Author Profile Page tomo @ July 8, 2008 [REPLY]
user-pic

bzbellさん
さっそくの返信ありがとうございましたキャハハ

ご返信いただきました内容を参考に色々実験しました結果から申しますと、お教えいただきましたPrototypeの「protoculous-packer.js」などを使用すると「shadowbox-base」より速度は少し改善されました。バイバイ


IE6ではだいぶ早くなったのですが、IE7ではそれほど変化は見られませんでしたので、引き続き調査をしてみたところ、改善方法を見つけました。

現在ダウンロードしている「shadowbox.js(70KBのもの)」は新しいもので、中身を見てみると「2008-06-28 20:09:34Z」と記載されているものなのですが、
古いverの「2008-02-21 16:51:29Z」と記載されている「shadowbox.js(89KBのもの)」を探してきて試してみたところ、
IE6、IE7でかなりの速度改善が見られました。
（古いのに改善というのもなんですが。。あせあせ

まだ完全に実験できていませんが、以上 現状での報告ですキャハハ

 
#13: Posted by Author Profile Page 哲やん @ August 31, 2008 [REPLY]
user-pic

ご無沙汰しております。
相変わらずLightboxオンリーなんですが、思い出したように「shadowbox」に再チャレンジ・・・
MT4.21で慣れかけていたところにMT4.12までしか設置できないサーバーに遭遇しています。
頭が固くなった者にとっては混乱の極みで、shadowbox設置が滞ってしまいました。
（X）HTMLならソースを参考に設置は可能なのですが、MTとなるとさっぱり（笑）
頭、痛い・・・（笑）

 
#14: Posted by Author Profile Page bzbellから哲やんへの返信 @ August 31, 2008 [REPLY]
user-pic

>>13 哲やん さん

こんにちわ^^

> MT4.21で慣れかけていたところにMT4.12までしか設置できないサーバーに遭遇しています。
えっ!? そいう制限があるサーバってのがあるんですか!? 知りませんでしたガーン

shadowbox の件ですが、
  1. サンプルを表示確認して、どのようにして shadowbox を使ってるかざっくりと把握する。
  2. サーバ上の index.html を FTP でダウンロードして、その index.html 内にサンプルと同様のことやってみる。そして、サーバにアップロードして表示確認する。
  3. index.html で表示ができれば、MT の変更対象となるテンプレート内に組み込んで完了!!
こんなかんじでやってみたらどうでしょうぅ～ん
 
#15: Posted by haru @ January 24, 2010 [REPLY]
user-pic

こんにちは^^

昨年は、お世話になりました。
本年も宜しくお願いします。

今回お聞きしたいのが、フラシュは、shadowboxで
表示できるようにできたんですが、flvのプレーヤーが表示できません。

['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']
ソースを書き換えました。

shadowboxファイルにplayer.swf入れて

HTMLにhref="flash/silkn.flv"で指定してもダメです。

本家のサイトを見ても良く分かりません。

ライセンスを購入しないとflvは、使えなのですかネ。

お忙しところ申し訳ございませんが、お返事お待ちしています。

 
#16: Posted by Author Profile Page bzbellからharuへの返信 @ January 24, 2010 [REPLY]
user-pic

>>15 haru さん

こんにちわ^^

FLV だけ特別何かするってことはないですよ。
ダウンロードしたサンプルでは再生できてますかはて？
まずはサンプルで再生してみることをオススメします。それが表示できるのでしたら、同様のことをやるだけですのでパチパチ

 
#17: Posted by haru @ March 20, 2010 [REPLY]
user-pic

こんばんは
FLVの件解決しました。
ありがとうございます。

お聞きしたいのですが、bzbellさんのソースを見せて頂きましたが
Shadowbox .jsのソースが無いようですが、Shadowbox は、何処に
置いて書かれているのですか？

良ければ・・教えていただけませんか。

 
#18: Posted by Author Profile Page bzbell @ March 20, 2010 [REPLY]
user-pic

>>17 haru さん

こんばんわ^^

ウチは Shadowbox と Highslide、他のエフェクト系をフレキシブルに使い分けてるんです。
ですので、ちょと特殊なことやってるので表面上は見えてないだけです。
haru さんとこ同様、ちゃんとロードはしてますよワクワク

 
#19: Posted by haru @ March 21, 2010 [REPLY]
user-pic

こんにちは

お返事ありがとうございます。
やっぱり・・bzbellさん特殊な難しいことをしていたんですね。^^;

 

 Post a Comment

 

コメント用フィード