Movable Type 備忘録
shadowbox.js を使ってみる
- Next Page: 正しいマークアップ（Another HTML-lint gateway）
- Prev Page: 子供らしさ -地球初！自分探し検索エンジン-
こんにちわ^^
危険なページを自分の代わりにチェックしてくれるサイトを教えてもらいました。
わたしの場合、危ないと分かっててそのページを表示することはなくって、むしろ気づいたら危ない目に遭う･･･という方が多いかな。
試しにわたしのサイトやってみたら、サイト内のリンク先の安全性をチェックした結果をイメージにして表示してくれるようです。
わたしはあまり活躍しそうにないけどブクマしておくといいかも、です。
さて、shadowbox
という JavaScript を使ってみました。
カンタンに言うと shadowbox は lightbox のようなものです。ようなものなんだけど、かなりの優れものぉ～ (●＞∀＜●)／
shadowbox の良いところは lightbox のように prototype 専用というわけではなくって、
jQuery や mootools などいろんなフレームワークに対応しているところです。
また、イメージファイルの表示だけじゃなく、動画やウェブページの表示もできます。
フレームワークごとに使い分ける
以下に対応してるフレームワークを一覧します。
アダプタという形で対応するフレームワークのライブラリをロードするようなしくみになってます。
配布元では YUI を使用してますが、わたしのサイトでは prototype 版を使用してます。
その場合は以下のように HTML ヘッダ（<head>～</head>）内に記述します。
<link rel="stylesheet" href="http://●●●.com/js/shadowbox/css/shadowbox.css" type="text/css" />
<script type="text/javascript" src="http://●●●.com/js/prototype/prototype.js"></script>
<script type="text/javascript" src="http://●●●.com/js/prototype/scriptaculous/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://●●●.com/js/shadowbox/js/adapter/shadowbox-prototype.js"></script>
<script type="text/javascript" src="http://●●●.com/js/shadowbox/js/shadowbox.js"></script>
赤い字の部分がフレームワーク依存のライブラリになります。
各ライブラリは adapter/ フォルダの中に入ってますので、必要に応じてロードすれば OK です。
基本的な使い方
基本的な使い方は lightbox と同様でアンカーの rel 属性に 'shadowbox' と明記します。
<a href="http://●●●.com/images/▲▲▲.png"
rel="shadowbox"
title="タイトル"><img alt="タイトル" src="http://●●●.com/images/▲▲▲.png" width="320" height="240" /></a>
そして、ページ下の方で以下のように shadow.js のアップロード先を設定してあげることでそのまま使えるようになります。
Event.observe(window, "load", function() {
var options = {
assetURL:
'http://●●●.com/js/shadowbox/'
};
Shadowbox.init(options);
});
上記は prototype 向けの定義の仕方ですが、以下のようにしても OK です。
window.onload = function() {
var options = {
assetURL:
'http://●●●.com/js/shadowbox/'
};
Shadowbox.init(options);
};
いずれも、赤い字の部分で shadowbox.js のアップロード先ディレクトリ名を指定してあげます。
以上で、shadowbox を使用することができました。
基本的には圧縮ファイル中の build/ フォルダの中すべてと、imgaes/ フォルダ、flvplayer.swf をアップロードすれば OK です。
わたしの場合は以下のようなディレクトリ構成として使用してます。
http://bizcaz.com/
|
+-- js/
| +-- shadowbox/
| | +-- flvplayer.swf
| | |
| | +-- images/
| | |
| | +-- js/
| | | +-- shadowbox.js
| | | |
| | | +-- adapter/
| | | +-- shadowbox-prototype.js
| | | +-- shadowbox-jquery.js
| | | +-- shadowbox-mootools.js
| | | +-- shadowbox-yui.js
| | | +-- shadowbox-dojo.js
| | | +-- shadowbox-ext.js
| | |
| | +-- css/
| | +-- shadowbox.css
各ライブラリを目的に応じて使い分ける
shadowbox や lightbox はフォトギャラリーのように画像をカッコよく表示するのに向いてると思います。 でも、highslide はどちらかと言えば文章の補足としてイメージを使う場合に向いてるかな･･･と思って、わたしのサイトでは highslide、shadowbox（lightbox）を目的に応じて使い分けるようにしてみました。
通常だとテンプレート中の HTML ヘッダ内で各ライブラリをロード（明記）して使いますね。
テンプレート中に埋め込まず、以下のような JavaScript を使って対応してます。
var effectbox = {
version: '1.01',
init: function() {
this.select = {
'lightbox': {init: 0, base: 'http://●●●.com/js/prototype/lightbox/', func: this.markup_lightbox },
'highslide': {init: 0, base: 'http://●●●.com/js/highslide/', func: this.markup_highslide},
'shadowbox': {init: 0, base: 'http://●●●.com/js/shadowbox/', func: this.markup_shadowbox}
};
},
pagebox: function(u,t,n) {
/*u:image URL */
/*t:image title*/
/*n:link name */
var elem = this.select['shadowbox'];
var markup = '';
if(!elem['init']) {
markup = '<link rel="stylesheet" href="'+elem['base']+'css/shadowbox.css" type="text/css" />';
markup += '<script type="text/javascript" src="'+elem['base']+'js/adapter/shadowbox-prototype.js"></script>';
markup += '<script type="text/javascript" src="'+elem['base']+'js/shadowbox.js"></script>';
elem['init']++;
}
markup += '<a rel="shadowbox" href="'+u+'" title="'+t+'">'+n+'</a>';
document.write(markup);
},
gallery: function(u,t,w,h,g) {
/*u:image URL */
/*t:image title */
/*w:image width */
/*h:image height */
/*g:group ID */
var elem = this.select['shadowbox'];
var opt = '['+g+'];options={counterType:\'skip\',continuous:true,animSequence:\'sync\'}';
var out = elem['func'](this);
out = out.replace(/%url/g, u);
out = out.replace(/%title/g, t);
out = out.replace(/%width/g, w);
out = out.replace(/%height/g, h);
out = out.replace(/%align/g, 'none');
out = out.replace(/%style/g, '');
out = out.replace('rel="shadowbox', 'rel="shadowbox'+opt);
document.write(out);
},
show: function(m,u,t,w,h,a) {
/*m:lightbox / highslide / shadowbox*/
/*u:image URL */
/*t:image title */
/*w:image width */
/*h:image height */
/*a:none / right / left */
var elem = this.select[m];
if (!elem) {
return;
}
var out = elem['func'](this);
out = out.replace(/%url/g, u);
out = out.replace(/%title/g, t);
out = out.replace(/%width/g, w);
out = out.replace(/%height/g, h);
out = out.replace(/%align/g, a);
out = out.replace(/%style/g, this.getstyle(a));
document.write(out);
},
markup_highslide: function(obj) {
var elem = obj.select['highslide'];
var markup = '';
if(!elem['init']) {
markup = '<link rel="stylesheet" href="'+elem['base']+'highslide.css" type="text/css" />';
markup += '<script type="text/javascript" src="'+elem['base']+'highslide.js"></script>';
elem['init']++;
}
markup += '<a href="%url" class="highslide" title="%title" onkeypress="javascript:void(0);" onclick="javascript:return hs.expand(this)" onkeypress="javascript:return hs.expand(this)"><img alt="%title" src="%url" width="%width" height="%height" class="mt-image-%align" %style /></a>';
return markup;
},
markup_shadowbox: function(obj) {
var elem = obj.select['shadowbox'];
var markup = '';
if(!elem['init']) {
markup = '<link rel="stylesheet" href="'+elem['base']+'css/shadowbox.css" type="text/css" />';
markup += '<script type="text/javascript" src="'+elem['base']+'js/adapter/shadowbox-prototype.js"></script>';
markup += '<script type="text/javascript" src="'+elem['base']+'js/shadowbox.js"></script>';
elem['init']++;
}
markup += '<a rel="shadowbox" href="%url" title="%title"><img alt="%title" src="%url" width="%width" height="%height" class="mt-image-%align" %style /></a>';
return markup;
},
markup_lightbox: function(obj) {
var elem = obj.select['lightbox'];
var markup = '';
if(!elem['init']) {
markup = '<link rel="stylesheet" href="'+elem['base']+'css/lightbox.css" type="text/css" />';
markup += '<script type="text/javascript" src="'+elem['base']+'lightbox.js"></script>'
elem['init']++;
}
markup += '<a rel="lightbox" href="%url" title="%title"><img alt="%title" src="%url" width="%width" height="%height" class="mt-image-%align" %style /></a>';
return markup;
},
getstyle: function(a) {
var align = {
'none': '',
'right': ' style="float: right; margin: 0 0 1em 1em;"',
'left': ' style="float: left; margin: 0 1em 1em 0;"'
};
return align[a];
}
};
Event.observe(window, "load", function() {
if (effectbox.select["highslide"].init) {
var elem = effectbox.select["highslide"];
/*▼highslide の拡張設定▼*/
hs.graphicsDir = elem["base"]+"graphics/";
hs.outlineType = "rounded-white";
}
if (effectbox.select["shadowbox"].init) {
var elem = effectbox.select["shadowbox"];
/*▼shadowbox の拡張設定▼*/
var options = {
assetURL: elem.base
};
Shadowbox.init(options);
}
if (effectbox.select["lightbox"].init) {
/*▼lightbox の拡張設定▼*/
}
});
赤い字の部分に各ライブラリのアップロード先 URL を記述します。
青い字の部分は各ライブラリの拡張設定を明記してます。
使い方は以下のようになります。（prototype.js をお使いの人向け）
上記コードをコピー & ペーストして effectbox.js という名前で保存します。 そして、HTML ヘッダ中に以下を追加します。
<script type="text/javascript" src="http://●●●.com/js/effectbox.js"></script> <script type="text/javascript"> <!-- effectbox.init(); //--> </script>イメージファイルを以下のようにマークアップします。
<span class="mt-enclosure mt-enclosure-image"> <script type="text/javascript"> effectbox.show( "shadowbox", // shadowbox、highslide、lightbox の何れかを選択 "http://●●●.com/▲.png", // イメージファイルの URL "タイトル", // タイトル 横幅, // サムネイル表示の横幅 高さ, // サムネイル表示の高さ "right" // left、right、none の何れか選択" ); </script> </span>
以上です。
上記はほんの一例ですが、こんなかんじでわたしのサイトでは臨機応変にライブラリを使い分けてます。
以下に各ライブラリの表示サンプルを記します。
highslide
<span class="mt-enclosure mt-enclosure-image"><script type="text/javascript">effectbox.show("highslide", "http://bizcaz.com/image/lightbox-demo.jpg", "highslide デモ", 100, 100, "left");</script></span>shadowbox
<span class="mt-enclosure mt-enclosure-image"><script type="text/javascript">effectbox.show("shadowbox", "http://bizcaz.com/image/lightbox-demo.jpg", "shadowbox デモ", 100, 100, "left");</script></span>
[2008.04.26]
shadowbox を使用してウェブページ、ギャラリー表示できるようスクリプトを変更しました。
具体的には以下のように使います。
- ウェブページ表示
<script type="text/javascript">effectbox.pagebox("http://●●●/▲▲▲.html", "タイトル", "リンク名");</script></li>- ギャラリー表示（XHTML）
<ul id="gallery"> <li><script type="text/javascript">effectbox.gallery("http://●●●/▲▲▲.png", "タイトル", 幅, 高さ, "グループ名");</script></li> <li><script type="text/javascript">effectbox.gallery("http://●●●/▲▲▲.png", "タイトル", 幅, 高さ,, "グループ名");</script></li> <li><script type="text/javascript">effectbox.gallery("http://●●●/▲▲▲.png", "タイトル", 幅, 高さ,, "グループ名");</script></li> <li><script type="text/javascript">effectbox.gallery("http://●●●/▲▲▲.png", "タイトル", 幅, 高さ,, "グループ名");</script></li> </ul>- ギャラリー表示（CSS）
#gallery {margin:0; padding:0; list-style:none;} #gallery li {margin:0; padding:0; float:left;}-
とりえあず、Firefox、Opera、Safari3、IE6、IE7 で確認すみです。
また、lightbox と shadowbox は同一ページ内ではいっしょに使うことはできないみたいです。
以上、ご参考まで (●´∀｀●)
- 2008.03.08 追記 -
こちらの画像を挿入で出力されるタグを Lightbox 対応にするを参考に、mt/lib/MT/Asset/Image.pm の 331 行目に以下のコードを追加することで画像挿入が楽できます。
$text = sprintf('<script type="text/javascript">effectbox.show("highslide", "%s", "%s", %s, %s, "%s");</script>',
MT::Util::encode_html($asset->url), MT::Util::encode_html($asset->label),
$thumb ? ($thumb->image_width, $thumb->image_height) : ($asset->image_width, $asset->image_height), $param->{align});
- 2008.03.09 追記 -
shadowbox で自サイト内のページを表示する場合、必ずファイル名を指定してないとダメみたいです。
たとえば、'http://bizcaz.com/' という URL ではダメで、'http://bizcaz.com/index.php' というように指定する必要があります。
外部サイトの場合は大丈夫みたいです。
Trackback Pings(3)
- from
TomoMiXの日記･Windows&Mac関連ソフト紹介ブログ「TRASH」
Shadowbox 上記サイトをまずご覧ください。 自分のブログでは適用できなかったので（かなり残念）デモも使用方法も詳しく書けません。このSha...
- from
Kyooto-きょおと-京都｜Blog-ぶろぐ-ブログ
京都の地図で使っていたjquery動画表示用のYouTubeプラグインをやめてShadowboxに変更しました。 これで、大きい画面でビデオが楽しめ...
- from
caraldo.net | MT Blog
最近JavaScriptにはまって色々勉強しています。 まだまだ全然読み解けないのですが、サンプルをちょこちょこいじって、何となくやりたい事が出来るように...
Comments(4)
-
#2: Posted by bzbell
[RES]
>>1 哲やん さん
こんばんわ^^
> 「フォトブログに最適・・・」なんて思いながらも写真を撮っていませんでした（笑）
わたしもです
センスがないのでうまく撮れなくって
> 時間がある時にでもこちらでいろいろテストしてみようと思っています。
けっこういろんなことできるから試してみてください。
Highslide と Shadowbox あれば完璧!! な気がしてる今日この頃です
- #3: Posted by 哲やん [RES]
ブログだけではなくても最近はJAVAスクリプトが大流行ですね。
と感じるのは情報不足の「お年寄り」なのかもしれません（笑）最近入社の頭の柔らかいスタッフにいろいろ教えてもらっているんですが、なかなか理解できないでいます。
私の勉強先は「ここ」と決めていますので、今後ともよろしくです。写真のセンスは・・・もちろんないです。女性のように大胆な「切り取り」方ができなくて・・・（笑）
ビジネスブログ用テンプレートなんかあったら、一緒にお仕事、してしまいそう・・・
-
#4: Posted by bzbell
[RES]
>>3 哲やん さん
こんにちわ^^
> ブログだけではなくても最近はJAVAスクリプトが大流行ですね。
そうですねぇ、Ajax が広く認知されたから…と聞いたことがあります。
わたしのサイトも JavaScript 必須になってます。> 私の勉強先は「ここ」と決めていますので、今後ともよろしくです。
わたしで分かることでしたらいつでもどうぞ
でも本職!? の若いスタッフさんの方がいろいろ知ってると思いますよ。なんせわたしは自称サンデープログラマーですから興味あることしか覚えませんから
いつもナイスなネタをありがとうございます。
「フォトブログに最適・・・」なんて思いながらも写真を撮っていませんでした（笑）
英語がまるっきしダメなので、日本語レクチャー、感謝しています。
時間がある時にでもこちらでいろいろテストしてみようと思っています。
ありがとうございました。