prototype.jsベースでshadowbox.jsを使ってみる

2008年4月23日

コメント（0）トラックバック（0） Posted by ; k.

prototype.jsベースでshadowbox.jsを使ってみる

最近JavaScriptにはまって色々勉強しています。

まだまだ全然読み解けないのですが、サンプルをちょこちょこいじって、何となくやりたい事が出来るようになってきています。
「ブログでもJavaScriptの記事書きたいな」とか思っていたのですが、公開するにはサンプルページがないと分かり難いですよね。

サンプルページってなんか良い見せ方ないかなぁと思っていたところに見つけました！
「shadowbox.js」、勉強がてら導入です。

shadowbox.jsサンプル

動きはこんな感じ→shadowbox.jsデモ

今回はこのshadowbox.jsをprototype.jsベースで導入する方法について書いていきます。
ちなみにrel="lightbox"の記述とも共存できています。

shadowbox.jsの特徴

このshadowbox.jsは従来のlightbox.jsよりも多々優れている点があります。

様々なJSフレームワークに対応
拡大表示できる形式が画像だけでなく幅広い
プラグイン検出機能
インターフェイスのカスタマイズが容易

等が挙げられます。

・様々なJSフレームワークに対応

Yahoo! User Interface Library (yahoo, dom, event, anim)
Ext (standalone, ext-core.js)
Prototype + Scriptaculous
jQuery
MooTools (requires Fx.Styles and its dependancies)
Dojo Toolkit (thanks Peter Higgins)

lightbox.jsではprototype.jsのみしか対応していませんでしたが、shadowbox.jsではこんなに複数のライブラリに対応しています。

最近jQueryが流行っていますのでこれは嬉しいのではないでしょうか。

・拡大表示できる形式が画像だけでなく幅広い

表示できる形式も従来とは異なり、SWFファイルや movファイル、Webページやページ内に隠しておいた要素なんかも出せちゃいます。

shadowbox.js導入方法

では特徴を分かってもらった上で導入しましょう。

・ファイルのダウンロード

まずはhttp://mjijackson.com/shadowbox/index.htmlの

部分からshadowbox.jsをダウンロードします。

2種類ありますが上のリンク「download the full Shadowbox distribution」の方が分かりやすいと思います。

・shadowbox.jsの編集

ダウンロードしてきたファイルの中からshadowbox.jsを開きローディングイメージ画像のパスを変更します。

78行目
loadingImage:       'images/loading.gif',
↓
loadingImage:       'http://blog.caraldo.net/img/loading.gif',


127行目
overlayBgImage:     'images/overlay-85.png',
↓
overlayBgImage:     'http://blog.caraldo.net/img/overlay-85.png',

今回は絶対パスで指定していますが相対パスでも問題ありません。

shadowbox.jsの最後にwindow.onloadしてfunctionを呼び込みます。
これはhead部分に記述しても問題ありませんが、ソースが汚くなるのが嫌だったので。

window.onload = function(){
    Shadowbox.init();
};

・headタグ部分でshadowbox.jsを読み込む

headタグ部分で必要なファイルを読み込みます。
prototype.jsベースの場合以下の様な感じ。

<!-- shadowbox関連 -->

<link rel="stylesheet" href="<$MTBlogURL$>css/shadowbox.css" type="text/css" /><!-- shadowbox用CSSファイル -->

<script type="text/javascript" src="<$MTBlogURL$>js/prototype.js"></script><!-- ベースライブラリ -->

<script type="text/javascript" src="<$MTBlogURL$>js/scriptaculous.js?load=effects"></script><!-- ベースライブラリ -->

<script type="text/javascript" src="<$MTBlogURL$>js/shadowbox-prototype.js"></script><!-- prototype.js用adapter -->

<script type="text/javascript" src="<$MTBlogURL$>js/shadowbox.js"></script><!-- shadowbox.js -->

（赤字部分は構成によって修正してください）

あとはオーバーレイ表示させたい部分のaタグ部分にrel="shadowbox"を追記してあげればOKです。

<a rel="shadowbox" class="option" title="Google.com" href="http://www.google.com/">デモページ</a>
デモページ

各optionは本家を参考にしてください。

・shadowbox.js導入時の注意点

導入時に気をつけなければいけない点があります。

ファイルは最新のものを使用する。

以前より導入していた方はlightboxを導入した時より更新していなかったせいか、全然動きませんでした。
以下より最新のものを落としなおしましょう。
Prototype JavaScript framework: Easy Ajax and DOM manipulation for dynamic web applications
script.aculo.us - downloads
effects.jsもお忘れ無く。

lightbox.jsとの共存

rel="lightbox"でもうまく動いてました。

454～466行目赤字部分の「light」の記述部分のおかげでしょうか。

var RE = {
resize:         /(img|swf|flv)/, // file types to resize
overlay:        /(img|iframe|html|inline)/, // content types to not use an overlay image for on FF Mac
swf:            /\.swf\s*$/i, // swf file extension
flv:            /\.flv\s*$/i, // flv file extension
domain:         /:\/\/(.*?)[:\/]/, // domain prefix
inline:         /#(.+)$/, // inline element id
rel:            /^(light|shadow)box/i, // rel attribute format
gallery:        /^(light|shadow)box\[(.*?)\]/i, // rel attribute format for gallery link
unsupported:    /^unsupported-(\w+)/, // unsupported media type
param:          /\s*([a-z_]*?)\s*=\s*(.+)\s*/, // rel string parameter
empty:          /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i // elements that don't have children
};

lightboxサンプル↓