@{
    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="http://lorempixum.com/750/300/sports/1">
                    <img alt="1" src="http://lorempixum.com/200/150/sports/1" title="Word Caption 1" />
                </a></li>
                <li class=""><a href="http://lorempixum.com/750/300/sports/2">
                    <img alt="2" src="http://lorempixum.com/200/150/sports/2" title="Word Caption 2" />
                </a></li>
                <li class=""><a href="http://lorempixum.com/750/300/sports/3">
                    <img alt="3" src="http://lorempixum.com/200/150/sports/3" title="Word Caption 3" />
                </a></li>
                <li class=""><a href="http://lorempixum.com/750/300/sports/4">
                    <img alt="4" src="http://lorempixum.com/200/150/sports/4" title="Word Caption 4" />
                </a></li>
                <li class=""><a href="http://lorempixum.com/750/300/sports/5">
                    <img alt="5" src="http://lorempixum.com/200/150/sports/5" title="Word Caption 5" />
                </a></li>
                <li class=""><a href="http://lorempixum.com/750/300/sports/6">
                    <img alt="6" src="http://lorempixum.com/200/150/sports/6" title="Word Caption 6" />
                </a></li>
                <li class=""><a href="http://lorempixum.com/750/300/sports/7">
                    <img alt="7" src="http://lorempixum.com/200/150/sports/7" title="Word Caption 7" />
                </a></li>
                <li class=""><a href="http://lorempixum.com/750/300/sports/8">
                    <img alt="8" src="http://lorempixum.com/200/150/sports/8" title="Word Caption 8" />
                </a></li>
                <li class=""><a href="http://lorempixum.com/750/300/sports/9">
                    <img alt="9" src="http://lorempixum.com/200/150/sports/9" 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>
}
