Display External Content

The wijgallery widget allows users to display content from external sources – this includes displaying Web pages that can be interacted with within the Galley interface. See the Gallery > Iframe sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/gallery/Iframe for an example.

Complete the following steps to display external content:

Create a new C1 ASP.NET MVC 5 Web Application (see Creating an MVC Classic 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="http://www.yahoo.com/"><img src="http://cdn.wijmo.com/images/yahoo_thumb.png" title="Yahoo" alt="Yahool" /></a></li>
        <li class=""><a href="http://www.componentone.com"><img src="http://cdn.wijmo.com/images/componentone_thumb.png" title="ComponentOne" alt="ComponentOne" /></a> </li>
        <li class=""><a href="http://www.microsoft.com"><img src="http://cdn.wijmo.com/images/microsoft_thumb.png" title="Microsoft" alt="Microsoft" /></a></li>
    </ul>
</div>

This markup will add one gallery widget to the page with Web site content. 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,#wijgallery2").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 and sets style of the gallery.

What You've Accomplished

Press F5 to run the application, and notice that the gallery contains website content. Press the Next or Previous buttons to change the currently displayed Web site.