«新生活を彩るおしゃれなインテリアショップ16選＋α｜ メイン ｜ソースコードを綺麗に表示するJS「dp.SyntaxHighlighter」»
2008年04月23日
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)
最近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>
デモページ・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サンプル↓
やってみるものですね。
こんな感じで導入は終わりでした。
これからいくつかこの見せ方でJavaScriptのサンプルとか書いていきたいと思います。
参考にさせて頂いたサイト
shadowbox.js を使ってみる - Movable Type 備忘録
Posted by ; k. 2008年04月23日 00:34
このエントリーのタグ
このカテゴリーの最新記事
トラックバック
このエントリーのトラックバックURL：
