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

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

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

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

ソースビュー	コードのコピー
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#wijgallery").wijgallery({ showControlsOnHover: true, thumbsDisplay: 4, thumbsLength: 150, showPager: false }); $("#btn1").click(function () { $("#wijgallery").wijgallery("option", "disabled", false); }); }); </script>

ソースビュー

コードのコピー

<script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#wijgallery").wijgallery({
                showControlsOnHover: true,
                thumbsDisplay: 4,
                thumbsLength: 150,
                showPager: false
            });
            $("#btn1").click(function () {
                $("#wijgallery").wijgallery("option", "disabled", false);
            });
        });
    </script>

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

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

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

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

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