Include Video Content

The wijgallery widget allows users to display video content. See the Gallery > Videos sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/gallery/Video for an example.

Complete the following steps to include video content:

Create a new ASP.NET MVC 5 Wijmo Application (see Creating an MVC Tools Project).
Navigate to the Solution Explorer, expand the Shared folder inside the Views folder, and double-click _Layout to open the file.

Add the following markup within the <body> tags of the page, just after @RenderBody():

<div id="wijgallery" class="">
    <ul class="">
        <li class="">
            <a href="https://www.youtube.com/v/J---aiyznGQ?version=3">
            <img src="http://cdn.wijmo.com/images/keyboardcat.png" title="Keyboard Cat" alt="Keyboard Cat" /></a>
        </li>
        <li class="">
            <a href="http://www.youtube.com/v/FzRH3iTQPrk?version=3">
            <img src="http://cdn.wijmo.com/images/panda.png" title="Sneezing Panda" alt="Sneezing Panda" /></a>
        </li>
        <li class="">
            <a href="http://www.youtube.com/v/z3U0udLH974?version=3">
            <img src="http://cdn.wijmo.com/images/talkingcats.png" title="Talking Cats" alt="Talking Cats" /></a>
        </li>
    </ul>
</div>

This markup will add one gallery widget with three videos to the page. In the next step, you'll initialize the gallery.

After the closing </div> tag you added in the previous step, enter the following jQuery script to initialize the wijgallery widget:

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#wijgallery").wijgallery({
            showControlsOnHover: false,
            thumbsDisplay: 4,
            thumbsLength: 100,
            mode: "iframe",
            showCaption: false,
            showTimer: false
        });
    });
</script>
<style type="text/css">
    #wijgallery
    {
        width: 750px;
        height: 500px;
    }
</style>

The above script and markup initializes the gallery.

What You've Accomplished

Press F5 to run the application, and notice that videos are displayed in the gallery widget. Press the Next or Previous buttons to change the current video displayed.