手順 2：ウィジェットの初期化

前の手順では、ライトボックスに表示されるコンテンツを追加するマークアップを追加しました。この手順では、ウィジェットを初期化するために必要な jQuery スクリプトを追加します。

以下の手順を実行します。

前の手順で追加した終了の </div> タグの後に、次の jQuery スクリプトを入力し、wijlightbox ウィジェットを初期化します。

ソースビュー	コードのコピー
<script type="text/javascript"> $(function () { $("#lightbox").wijlightbox({modal: true}); }); </script>

このスクリプトはウィジェットを初期化します。

前の手順で追加した終了の </script> タグの後に、次のマークアップを追加し、wijlightbox ウィジェットをスタイリングします。

ソースビュー	コードのコピー
<style type="text/css"> #wijlightbox { width: 750px; } </style>

このマークアップはウィジェットをスタイリングします。

アプリケーションを作成し、wijlightbox ウィジェットを追加および初期化しました。次の手順「手順 3：プロジェクトの実行」では、ウィジェットの実行時のインタラクティブ操作を表示します。