BiND3でJQueryを組み込む方法

■JQueryとは？
JQueryは、 FierfoxのJavaScriptエバンジェリストを務めていたJohn Resig が2006年1月に発表した軽量なjavaScriptライブラリです。
jQueryは、そのキャッチフレーズ「write less, do more」の通り「少ないコードで、より多くのことを実行」できる優れたライブラリです。
まず第一にその特徴は、軽量であること。現在（2010/4）のバージョン1.4.2でMinifiedとGzip圧縮されたサイズはわずか24KBとなります。
そして、もちろんブラウザに依存しないクロスブラウザな動作をしてくれます。
このおかげで、無数のブラウザ依存コードへの対処に悩まされる苦労が激減します。
さらに、この軽量なjQuery本体の他に、jQueryの機能を更に拡張してくれる豊富な「プラグイン」と、
「jQuery UI」の存在も魅力です。「プラグイン」は、自作できる拡張メソッドであり、世界中の多くの開発者によって作成されています。
「jQuery UI」は、公式な拡張ライブラリですが、多彩なビジュアルエフェクトやドラッグドロップ処理から
アコーディオン、タブ、スライダー、日付ピッカー、カラーピッカー、ダイアログ
といった完成度の高いウィジェットなどが含まれています。
（参考：jQuery UI デモ：http://jqueryui.com/demos/）

■LightBox
写真や動画をクリックしたときに、背景をブラックアウトして画像や動画を浮き立たせるボックス。
こんなJQueryライブラリを使います。
ダウンロード＆demo：

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

■BiND3への組み込み方法

１．上記のようなJQueryライブラリをダウンロード

２．ダウンロードしたライブラリをBiND3サイトフォルダの「_userdata」配下へ配備

３．JQueryを利用するページの設定画面で以下を設定。（必要なページで各々定義要）
「設定」-「ページ設定」-「スクリプトと詳細設定」
スクリプト入力欄に以下のようにを入力（※ライブラリ名・パスは適宜修正）
——————————-
<script type=”text/javascript”></script> <script src=”_userdata/jquery/js/jquery-1.3.2.min.js” type=”text/javascript”></script> <link rel=”stylesheet” href=”_userdata/jquery/css/prettyPhoto.css” type=”text/css” media=”screen” title=”prettyPhoto main stylesheet”
charset=”utf-8″ />
<script src=”_userdata/jquery/js/jquery.prettyPhoto.js” type=”text/javascript” charset=”utf-8″></script> <script type=”text/javascript” charset=”utf-8″> $(document).ready(function(){ $(“a[rel^='prettyPhoto']“).prettyPhoto();
});
</script>
——————————-

４．あとは適宜必要箇所でカスタムタグ作成し、以下のように設定

——————————-
<a href=”http://www.youtube.com/watch?v=xxxxxxx” rel=”prettyPhoto” title=”XXXXXXX”> <img src=”_userdata/youtube.png” width=”200″ alt=”XXXXXXX” /> </a>
——————————-

これでBiND3によるアップロードにも対応できます。

以上
===============================