@{
    ViewBag.Title = "Overview";
    Layout = "~/Views/Shared/_WidgetLayout.cshtml";
}
@section header
{
    <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>
    <style type="text/css">
        #wijgallery
        {
            width: 750px;
        }
    </style>
}
<div class="main demo">
    <!-- Begin demo markup -->
    <div>
        <div id="wijgallery" class="">
            <ul class="">
                <li class=""><a href="../Content/Images/Sports/1.jpg">
                    <img alt="1" src="../Content/Images/Sports/1_small.jpg" title="Word Caption 1" />
                </a></li>
                <li class=""><a href="../Content/Images/Sports/2.jpg">
                    <img alt="2" src="../Content/Images/Sports/2_small.jpg" title="Word Caption 2" />
                </a></li>
                <li class=""><a href="../Content/Images/Sports/3.jpg">
                    <img alt="3" src="../Content/Images/Sports/3_small.jpg" title="Word Caption 3" />
                </a></li>
                <li class=""><a href="../Content/Images/Sports/4.jpg">
                    <img alt="4" src="../Content/Images/Sports/4_small.jpg" title="Word Caption 4" />
                </a></li>
                <li class=""><a href="../Content/Images/Sports/5.jpg">
                    <img alt="5" src="../Content/Images/Sports/5_small.jpg" title="Word Caption 5" />
                </a></li>
                <li class=""><a href="../Content/Images/Sports/6.jpg">
                    <img alt="6" src="../Content/Images/Sports/6_small.jpg" title="Word Caption 6" />
                </a></li>
                <li class=""><a href="../Content/Images/Sports/7.jpg">
                    <img alt="7" src="../Content/Images/Sports/7_small.jpg" title="Word Caption 7" />
                </a></li>
                <li class=""><a href="../Content/Images/Sports/8.jpg">
                    <img alt="8" src="../Content/Images/Sports/8_small.jpg" title="Word Caption 8" />
                </a></li>
                <li class=""><a href="../Content/Images/Sports/9.jpg">
                    <img alt="9" src="../Content/Images/Sports/9_small.jpg" title="Word Caption 9" />
                </a></li>
            </ul>
        </div>
    </div>
    <!-- End demo markup -->
    <div class="demo-options">
        <!-- Begin options markup -->
        <!-- End options markup -->
    </div>
</div>
@section description
        {
    <p>
        This sample illustrates the default wijgallery, which is useful for displaying images
        and their thumbnails.
    </p>
}
