マークアップとスクリプティング

wijgallery ウィジェットの HTML マークアップは、次のように、グラフィック画像のリストです。

マークアップ	コードのコピー
<div id="wijgallery"> <ul class=""> <li class=""><a href="Images/sports1.png"> <img alt="1" src="Images/sports1.png" title="Word Caption 1" /> </a></li> <li class=""><a href="Images/sports2.png"> <img alt="2" src="Images/sports2.png" title="Word Caption 2" /> </a></li> <li class=""><a href="Images/sports3.png"> <img alt="3" src="Images/sports3.png" title="Word Caption 3" /> </a></li> <li class=""><a href="Images/sports4.png"> <img alt="4" src="Images/sports4.png" title="Word Caption 4" /> </a></li> <li class=""><a href="Images/sports5.png"> <img alt="5" src="Images/sports5.png" title="Word Caption 5" /> </ul> </div>

マークアップ

コードのコピー

<div id="wijgallery">          
    <ul class="">
            <li class=""><a href="Images/sports1.png">
        <img alt="1" src="Images/sports1.png" title="Word Caption 1" />
    </a></li>
    <li class=""><a href="Images/sports2.png">
        <img alt="2" src="Images/sports2.png" title="Word Caption 2" />
    </a></li>
    <li class=""><a href="Images/sports3.png">
        <img alt="3" src="Images/sports3.png" title="Word Caption 3" />
    </a></li>
    <li class=""><a href="Images/sports4.png">
        <img alt="4" src="Images/sports4.png" title="Word Caption 4" />
    </a></li>
    <li class=""><a href="Images/sports5.png">
        <img alt="5" src="Images/sports5.png" title="Word Caption 5" />
    </ul>
</div>

次の jQuery スクリプトでウィジェットを初期化できます。

スクリプト	コードのコピー
<script type="text/javascript"> requirejs.config({ baseUrl: "http://cdn.wijmo.com/amd-js/3.20173.128", paths: { "jquery": "jquery-1.11.1.min", "jquery-ui": "jquery-ui-1.11.0.custom.min", "jquery.ui": "jquery-ui", "jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min" } }); </script> <script id="scriptInit" type="text/javascript"> require(["wijmo.wijgallery"], function () { $(document).ready(function () { $("#wijgallery").wijgallery({ showCounter: false }); }); }); </script>

スクリプト

コードのコピー

<script type="text/javascript">
    requirejs.config({
        baseUrl: "http://cdn.wijmo.com/amd-js/3.20173.128",
            paths: {
                "jquery": "jquery-1.11.1.min",
                "jquery-ui": "jquery-ui-1.11.0.custom.min",
                "jquery.ui": "jquery-ui",
                "jquery.mousewheel": "jquery.mousewheel.min",
                "globalize": "globalize.min"
            }
    });
</script>

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijgallery"], function () {
        $(document).ready(function () {
            $("#wijgallery").wijgallery({
                showCounter: false
            });
        });
    });
</script>

ここで説明しているマークアップとスクリプトの結果は次のようになります。ギャラリーにマウスポインタを合わせると、アニメーションが表示されます。

関連トピック